用户离开网站前的弹窗

作者: coffee1949 | 来源:发表于2019-08-19 17:10 被阅读0次

用户离开网站前的弹窗
UI设计师需要了解的 APP弹窗体系
UI设计师需要了解的 APP弹窗体系
一些异常及后续规避
Popup
APP中弹窗类型
移动端弹窗的分类与介绍
【JavaScript的弹窗】
弹窗样式你知道几种？
Nginx 504 Gateway Time-out/xxxx方

!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>