用户离开网站前的弹窗
2019-08-19 本文已影响0人
coffee1949
!function(){
window.history.pushState({}, document.title, location.href);
window.addEventListener('popstate', () => {
// 关闭网站弹窗提示
$('.index-model-wrapper').show()
}, false);
}()
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="https://unpkg.com/zepto@1.2.0/dist/zepto.js"></script>
<style>
.index-model-wrapper {
display: none;
position: fixed;
left: 0;
top: 0;
z-index: 10000;
width: 100vw;
height: 100vh;
background-color: rgba(0, 0, 0, 0.6);
}
.index-model {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: 78vw;
height: 120vw;
border-bottom-left-radius: 8px;
border-bottom-right-radius: 8px;
background-color: #fff;
}
.index-model img {
width: 100%;
}
.index-model-text {
padding: 1.5rem 1.2rem;
font-size: 0.66rem;
line-height: 1.1rem;
color: #333;
}
.index-model-text p span {
color: #641dd4;
}
.agree {
font-size: .66rem;
text-align: center;
padding-top: .4rem;
}
.agree img {
width: .66rem;
height: .66rem;
border: 1px solid #641dd4;
border-radius: 50%;
vertical-align: middle;
margin-right: .2rem;
}
.index-model-text .btn {
display: block;
background: -webkit-gradient(linear, left top, left bottom, from(#9c5cf7), to(#580fcd));
background: -webkit-linear-gradient(top, #9c5cf7 0%, #580fcd 100%);
background: linear-gradient(180deg, #9c5cf7 0%, #580fcd 100%);
line-height: 2.2rem;
color: #fff;
text-align: center;
border-radius: 1.5625rem;
margin-top: 0.9375rem;
font-size: .72rem;
}
</style>
</head>
<body>
hello 你离开试试！！！
有交互才会有弹窗
<div class="index-model-wrapper" onclick="hideModel()">
<div class="index-model">
<img src="http://wx.11babay.cn/uploads/j/jabsve1561531971/0/4/4/7/5d5a634e6910c.jpg_p2js" alt="">
<div class="index-model-text">
<p>手不独论，手相AI由<span>3位</span>国内资深相学大师整理的手相学基本概念，和<span>5位</span>人工智能工程师运用深度神经网络学习语言让<span>AI</span>学习近<span>20万</span>拥有<span>108个</span>定位点的真实手相样本数据，<span>AI</span>测算精准的数据，匹配手相学大师倾囊相授的手相经验，我们尽最大可能真实还原《手相学》这一中国传统文化的精髓，希望可以展示其中的规律之美。
</p>
<div class="agree">
<img src="http://wx.11babay.cn/uploads/j/jabsve1561531971/2/1/5/7/5d5a63383a1f0.png_p2js" alt="">
我已阅读并同意<a href="./agree.html">《用户隐私协议》</a>
</div>
<a href="./upload.html" class="btn">查看我的手相</a>
</div>
</div>
</div>
<script>
! function () {
window.history.pushState({}, document.title, location.href);
window.addEventListener('popstate', () => {
// 关闭网站弹窗提示
$('.index-model-wrapper').show()
window.history.pushState({}, document.title, location.href);
}, false);
}()
function hideModel() {
$('.index-model-wrapper').hide()
}
(function (doc, win) {
var docEl = doc.documentElement,
resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
recalc = function () {
var clientWidth = docEl.clientWidth;
if (!clientWidth) return;
if (clientWidth >= 600) {
clientWidth = 600;
}
docEl.style.fontSize = 16 * (clientWidth / 320) + 'px';
};
if (!doc.addEventListener) return;
win.addEventListener(resizeEvt, recalc, false);
doc.addEventListener('DOMContentLoaded', recalc, false);
})(document, window);
</script>
</body>
</html>
