实例代码 - 手册网

实例代码“Ctrl+/”提示“F11/ESC”全屏返回格式化恢复运行

<!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="/api/jq/5733e37808953/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>

​x
 
<!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="/api/jq/5733e37808953/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;