Question

我发现这是智能手机的一个问题，它可能与桌面有关。我们已经'修改'我们的引导模式以便响应，但是当在智能手机上显示它是全屏时，用户假设模态是页面并且点击回“关闭”它。我们已将右上角包含在X中，但也需要后退按钮来关闭模态。有人有什么想法吗？

由于

Answer 1

感谢http://www.mylearning.in/2015/06/close-modal-pop-up-on-back-button.html

，我找到了更好的方法

    $('#myModal').on('show.bs.modal', function(e) {
        window.location.hash = "modal";
    });

    $(window).on('hashchange', function (event) {
        if(window.location.hash != "#modal") {
            $('#myModal').modal('hide');
        }
    });

Answer 2

最简单的方法是让用户感觉它的弹出窗口或模型不是新页面，通过使用一些边距或使其成为span10 offset1类型。

另一种方法是打开和关闭方法，其中描述了here

最好的方法是

<SCRIPT type="text/javascript">
   window.history.forward();
   function noBack() { window.history.forward(); }
</SCRIPT>
</HEAD>
<BODY onload="noBack();"onpageshow="if (event.persisted) noBack();" onunload="">

描述here

用于控制iFrame的后退按钮，尝试这可能会有所帮助（未经测试）

<SCRIPT type="text/javascript">
   window.parent.history.forward();
   function noBack() { window.parent.forward(); }
</SCRIPT>
</HEAD>

Answer 3

您可以通过编写几行代码来做到这一点，但是您需要一种更好的方法来获得一致的结果，即按下浏览器/移动后退按钮并使用[x]按钮隐藏模式或在模态工作完全相同。

从这个意义上讲，我认为以下方法是一种更好的解决方案。它可以在具有Bootstrap 4.0或更高版本的现代浏览器（HTML5 Javascript ES6）上运行，但您可以对其进行调整以适应较早的浏览器支持。

1-为要通过浏览器后退按钮关闭的所有模态分配一个data-hash="#some-hash"属性。

2-负责将哈希值附加到url的块

// Add hash to the URL on open modal event
$('.modal').on('shown.bs.modal', function() {
    if (typeof(this.dataset.hash) !== 'undefined') {
        history.pushState(null, null, this.dataset.hash)
    }
})

3-收听hide.bs.modal事件并确定是否按下了后退按钮

// trigger browser back button when the modal is dismissed (using x button etc...)
$('.modal').on('hide.bs.modal', function(event) {
    if (this.dataset.pushback !== 'true') {
        event.preventDefault()
        history.back()
    }
    this.dataset.pushback = ''
})

4-负责处理浏览器后退按钮的块。我们将pushback属性添加为标志，以指示后退按钮按下事件。

// Close current open modal (if any) on browser back event
window.onpopstate = function() {
    let open_modal = document.querySelector('.modal.show')
    if (open_modal) {
        open_modal.dataset.pushback = 'true';
        $(open_modal).modal('hide')
    }
}

如何使用浏览器后退按钮关闭引导模式而不是返回页面？`

3 个答案: