文章/答案/技术大牛

发布

社区首页 >问答首页 >单击浏览器后退按钮时隐藏Modal窗口(Modal Box)

问单击浏览器后退按钮时隐藏Modal窗口(Modal Box)
EN

Stack Overflow用户

提问于 2020-11-14 08:28:17

回答 1查看 1.3K关注 0票数 2

当用户打开网站时，他可以点击登录按钮，然后在模式中查看登录表单。但是当用户单击“后退浏览器”按钮时，他会返回上一页。如果上一页是“启动浏览器页”，则返回“启动浏览器页”。

当用户单击“浏览器后退”按钮时，是否可以只隐藏模式而不添加任何其他警报？当用户触摸手机上的返回按钮时，也有可能隐藏这种模式？(我只是指手机底部的Android手机上存在的按钮，该按钮将用户返回到前一个窗口/屏幕)

PHP和JS代码在现场使用。

非常感谢你的帮助

php

html

jquery

javascript

回答 1

Stack Overflow用户

发布于 2020-11-14 09:35:45

您可能需要的选项很多，但我将尝试给您一个相对简单的JS代码示例。在这个例子中，我使用了Bootstrap。

这段代码的工作方式：

当您按下浏览器上的“后退”按钮时，该函数将搜索打开的模式窗口。

当模态元素打开时，有类modal fade show。如果代码中存在具有这些类的元素，则执行下一步。

在下一步中，函数查找“关闭”按钮并单击它。“关闭”按钮有类btn btn-secondary。

此代码适用于桌面和移动设备。关闭模态窗口后，“后退”按钮返回正常操作。

我希望我能帮上忙

示例代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
        integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"
        integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
        crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"
        integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
        crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"
        integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
        crossorigin="anonymous"></script>
</head>
<body>




    <!-- Button trigger modal -->
    <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
        Launch demo modal
    </button>

    <!-- Modal -->
    <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
        aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    ...
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                    <button type="button" class="btn btn-primary">Save changes</button>
                </div>
            </div>
        </div>
    </div>




    <script>

        function back_Button() {

            history.pushState(null, null);
            window.addEventListener('popstate', () => {

                // Add here the classes of the MODAL as they look when it is open
                var x = document.getElementsByClassName('modal fade show')[0];
                if (x) {                 
                    // Add here the classes of target Close Button
                    var z = x.getElementsByClassName('btn btn-secondary')[0];
                    z.click();               
                    history.pushState(null, null);
                } else {
                    window.history.back();
                }
                
            });

        }

        back_Button();

    </script>

</body>
</html>

票数 2

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/64832109

复制

相似问题

问单击浏览器后退按钮时隐藏Modal窗口(Modal Box)
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问单击浏览器后退按钮时隐藏Modal窗口(Modal Box)EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问单击浏览器后退按钮时隐藏Modal窗口(Modal Box)
EN