bootstrap 模态加ouibounce 实现用户首次离开时弹窗挽留效果

首先,用的是bootstrap3的模态


1. 让其垂直居中的css  在dialog 外包一层modal_wrapper 

.modal_wrapper{
    display: table;
    height: 100%;
    margin: 0px auto;
}
.modal-dialog{
    display: table-cell;
    vertical-align: middle;
}


2. 在modal上加 data-backdrop="static" 禁用点模态关闭效果


3. 引入 ouibounce

在其callback中 加上模态的显示


$(function(){
        ouibounce(document.getElementById('share'),
            {
                // aggressive: true,
                callback: function() {
                    $('#share').modal();
                },
                // cookieExpire: 1/(24*60*60*1000),
                sitewide: true,
            }
        );
    })
    function hide_share(){
        $('#share').modal('hide');
    }


下面分享按钮 可以用一个隐藏表单实现。

传递title 、pic 分别为 分享内容和图片。

submit事件上写一个函数用于隐藏弹窗,直接写onsubmit属性上无效。

标签:none