<head>
    <title>Demo Exit Intent</title>
    <!-- Load Ouibounce from CDN -->
    <!--link rel="stylesheet" type="text/css" href="https://cdn.rawgit.com/carlsednaoui/ouibounce/master/test/ouibounce.min.css"-->
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/ouibounce/0.0.11/ouibounce.min.js"></script>
</head>

<body>
    <p>Di chuyển con trỏ chuột của bạn để thoát trang này và xem kết quả nhé :D </p>
      <br><br>
      <a href="https://www.ntlruby.com/" target="_blank">Xem tất cả bài viết trên NTLRUBY</a>
      <!-- Ouibounce Modal -->
      <div id="ouibounce-modal">
          <div class="underlay"></div>
        <div class="modal">
          <div class="modal-title">
                  <h3>Cảm ơn bạn đã xem Blog NTLRUBY!</h3>
              </div>
          <div class="modal-body">
<p style="text-align: center;">Bạn sẽ là người đầu tiên nhận được những thủ thuật mới được đăng tải trên Blog <a href="https://www.ntlruby.com/"><b>NTLRUBY</b></a> </p>
<div id='subscribe-css'>
<p class='subscribe-note'><span>Nhận Tin</span> <span class='itatu'/>Khi Có Bài Đăng Mới</p>
<div class='subscribe-wrapper'>
<div class='subscribe-form'>
<form action='https://api.follow.it/subscription-form/MUI2a1lpOXUzcXcwa0tGWnluV3NvTFdibTNYa1FpVW8wb0VzRWdZQ3hNcUkvV1ZnZVpLaktuQnZwUmlvZGowRnpNYUdIazU0Z2E2dWFlQUVKTXVUOXlZSWt5R0YxcnBTSEhnN1NpREt1ME1XMXB3T1pSVEVWWjR0MmNaR1dpMlR8S0wzbFVIR05rSXhVL0xNV2liRlVMQWZROWNrL0RnT0xaWnZ3VUhUWTE3MD0=/8' method='post'>
<input name='uri' type='hidden' value='Ntlruby'/><input name='loc' type='hidden' value='en_US'/><input autocomplete='on' class='subscribe-css-email-field' name='email' placeholder='Nhập Email Của Bạn' required=""/><input class='ripplelink subscribe-css-email-button' title='' type='submit' value='Đăng Ký'/></form>
</div>
</div>
</div>
           </div>
                     <div class="modal-footer">
                  <p onclick="document.getElementById('ouibounce-modal').style.display = 'none';">Tắt Popup </p>
              </div>
      </div>
      </div>

      <script>
        var _ouibounce = ouibounce(document.getElementById('ouibounce-modal'), {
            aggressive: true, // set === true nhe cac bạn
        });
      </script>
  
</body>
    /* Subscribe Box */
#subscribe-css{position:relative;padding:20px 0;background:#0a3d53;overflow:hidden;border-top:4px solid #eee;}
.subscribe-wrapper{color:#fff;font-size:16px;line-height:normal;margin:0;text-align:center;text-transform:none;font-weight:400;width:100%}
.subscribe-form{clear:both;display:block;overflow:hidden}
form.subscribe-form{clear:both;display:block;margin:0;width:auto;overflow:hidden}
.subscribe-css-email-field{background:#0c4862;color:#ccc;margin:10px 0;padding:15px 20px;width:50%;border:0}
.subscribe-css-email-button{background:#3cc091;color:#fff;cursor:pointer;font-weight:700;padding:14px 30px;margin-left:15px;text-transform:none;font-size:16px;border:0;border-radius:3px;transition:all .6s}
.subscribe-css-email-button:hover{background:#37b185;}
#subscribe-css p.subscribe-note{margin:16px;text-align:center;color:rgba(255,255,255,.6);font-size:180%;font-weight:400;line-height:normal;}
#subscribe-css p.subscribe-note span {position:relative;overflow:hidden;font-weight:700;transition:all .5s}
#subscribe-css p.subscribe-note span.itatu {font-weight:400;font-style:italic;color:rgba(255,255,255,.6);text-transform:lowercase}
#subscribe-css p.subscribe-note span.itatu:before,#subscribe-css p.subscribe-note span.itatu:after{display:none}
#subscribe-css p.subscribe-note span:before{content:&#39;&#39;;position:absolute;bottom:-2px;left:0;width:0;height:3px;margin:10px 0 0;background:rgba(255,255,255,.1);transition:all .5s}
#subscribe-css:hover p.subscribe-note span:before{width:100%;}
.subscribe-css-email-field::-webkit-input-placeholder,.subscribe-css-email-field::-moz-placeholder,.subscribe-css-email-field:-ms-input-placeholder,.subscribe-css-email-field:-moz-placeholder{color:rgba(255,255,255,.7)}

    /*LPopup Ouibounce CSS */
#ouibounce-modal{font-family:'Open Sans',sans-serif;display:none;position:fixed;top:0;left:0;width:100%;height:100%}#ouibounce-modal .underlay{width:100%;height:100%;position:absolute;top:0;left:0;background-color:rgba(0,0,0,.5);cursor:pointer;-webkit-animation:fadein .5s;animation:fadein .5s}#ouibounce-modal .modal{width:600px;height:400px;background-color:#f0f1f2;z-index:1;position:absolute;margin:auto;top:0;right:0;bottom:0;left:0;border-radius:4px;-webkit-animation:popin .3s;animation:popin .3s}#ouibounce-modal .modal-title{font-size:18px;background-color:#3184ff;color:#fff;padding:10px;margin:0;border-radius:4px 4px 0 0;text-align:center}#ouibounce-modal h3{color:#fff;font-size:1em;margin:.2em;text-transform:uppercase;font-weight:500}
#ouibounce-modal h3:hover{text-decoration:underline;}#ouibounce-modal .modal-body{padding:20px 35px;font-size:.9em}#ouibounce-modal p{color:#344a5f}#ouibounce-modal form{text-align:center;margin-top:35px}#ouibounce-modal form input[type=text]{padding:12px;font-size:1.2em;width:300px;border-radius:4px;border:1px solid #ccc;-webkit-font-smoothing:antialiased}#ouibounce-modal form input[type=submit]{text-transform:uppercase;font-weight:700;padding:12px;font-size:1.1em;border-radius:4px;color:#fff;background-color:#4ab471;border:none;cursor:pointer;-webkit-font-smoothing:antialiased}#ouibounce-modal form p{text-align:left;margin-left:35px;opacity:.8;margin-top:1px;padding-top:1px;font-size:.9em}#ouibounce-modal .modal-footer{position:absolute;bottom:20px;text-align:center;width:100%}#ouibounce-modal .modal-footer p{text-transform:capitalize;cursor:pointer;display:inline;border-bottom:1px solid #344a5f}@-webkit-keyframes fadein{0%{opacity:0}100%{opacity:1}}@-ms-keyframes fadein{0%{opacity:0}100%{opacity:1}}@keyframes fadein{0%{opacity:0}100%{opacity:1}}@-webkit-keyframes popin{0%{-webkit-transform:scale(0);transform:scale(0);opacity:0}85%{-webkit-transform:scale(1.05);transform:scale(1.05);opacity:1}100%{-webkit-transform:scale(1);transform:scale(1);opacity:1}}@-ms-keyframes popin{0%{-ms-transform:scale(0);transform:scale(0);opacity:0}85%{-ms-transform:scale(1.05);transform:scale(1.05);opacity:1}100%{-ms-transform:scale(1);transform:scale(1);opacity:1}}@keyframes popin{0%{-webkit-transform:scale(0);-ms-transform:scale(0);transform:scale(0);opacity:0}85%{-webkit-transform:scale(1.05);-ms-transform:scale(1.05);transform:scale(1.05);opacity:1}100%{-webkit-transform:scale(1);-ms-transform:scale(1);transform:scale(1);opacity:1}}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.