离开你网站时显示模态弹窗 - 代码效果

关闭

离开你网站时显示模态弹窗

2014-04-07
| 精选 | 天猫 |
览 822
在线 1 人|

Ouibounce 是一个微小的库，用于实现在用户离开你的网站的时候显示一个模式窗口。这个库可以帮助你增加着陆页的转换率。 Ouibounce 会在当鼠标光标移动到接近（或通过）视口（viewport）的顶部的时候触发。

<!DOCTYPE html>
<html lang="zh-cn">
  <head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
    <title>OuiBounce Testing Page-鸽码</title>
    <link rel="stylesheet" href="daima/ouibounce/ouibounce.min.css">
    <style>
      body {
        background-color: #F0F1F2;
        color: #2E4052;
        min-height: 500px;
        padding: 0;
        -webkit-font-smoothing: antialiased;
        font-family: sans-serif;
      }
      .top-banner {
        background-color: #333;
      }
      .title {
        width:600px; 
        margin:200px auto;
        font-size:60px;
        text-align:center;
        font-family: 'Microsoft Yahei';
        text-shadow: 1px 1px 1px #999;
      }
    </style>
  </head>

<body style="margin-top:100px">
    
    <div class="title">尝试离开页面试试</div>

<div id="ouibounce-modal">
      <div class="underlay"></div>
      <div class="modal">
        <div class="modal-title">
          <h3>亲，你要订阅吗？</h3>
        </div>
        <div class="modal-body">
          <form style="margin-top:95px">
            <input type="text" placeholder="you@email.com">
            <input type="submit" value="订阅">
            <p class="form-notice" style="margin-left:85px;margin-top:10px">*这是一个模拟的表单</p>
          </form>
        </div>

// if you want to use the 'fire' or 'disable' fn,
      // you need to save OuiBounce to an object
      var _ouibounce = ouibounce(document.getElementById('ouibounce-modal'), {
        aggressive: true,
        timer: 0,
        callback: function() { console.log('ouibounce fired!'); }
      });

$('body').on('click', function() {
        $('#ouibounce-modal').hide();
      });

$('#ouibounce-modal .modal-footer').on('click', function() {
        $('#ouibounce-modal').hide();
      });

$('#ouibounce-modal .modal').on('click', function(e) {
        e.stopPropagation();
      });
    </script>
  </body>
</html>

提示：输入修改代码都可运行！