网站建设开发移动端弹窗弹出后手机物理返回关闭弹窗不跳转页面

css:

<style>

    .popup {

        display: none;

        position: fixed;

        z-index: 1000;

        top: 0;

        bottom: 0;

        left: 0;

        right: 0;

        margin: auto;

        background-color: #000000;

    }

    .btn {

        margin: 100px auto;

        width: 100px;

        height: 40px;

        line-height: 38px;

        border-radius: 25px;

        text-align: center;

        border: 1px solid green;

        cursor: pointer;

    }

</style>

html:

<body>

    <div class="popup">

    </div>

    <div class="btn">弹窗</div>

</body>

js:

<!-- 引入JQ -->

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>

<script>

// 拉起弹窗

    $(".btn").click(function () {

        $(".popup").fadeIn();

        pushHistory();

    })

    //拉起弹窗后手机物理返回操作关闭弹窗，弹窗出现时执行'pushHistory'函数,获取地址

    function pushHistory() {

        var state = {

            title: "title",

            url: "#"

        };

        window.history.pushState(state, "title");

    }

    // 监听手机物理返回

    window.addEventListener("popstate", function (e) {

        // 判断弹窗是否显示

        if ($(".popup").css('display') == "block") {

            $(".popup").fadeOut();

        } else {

            history.back()

        }

    }, false);

</script>

弹窗时执行函数pushHistory();即可做到移动端弹窗弹出是物理返回关闭弹窗不跳转页面