Jquery 如何使用浏览器后退按钮关闭引导模式，而不是返回页面`_Jquery_Jquery Ui_Twitter Bootstrap_Modal Dialog

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

jquery jquery-ui twitter-bootstrap

Jquery 如何使用浏览器后退按钮关闭引导模式，而不是返回页面`,jquery,jquery-ui,twitter-bootstrap,modal-dialog,Jquery,Jquery Ui,Twitter Bootstrap,Modal Dialog,我发现这是智能手机的问题，可能与台式机有关。我们已经“修改”了我们的引导模式，使其具有响应性，但是当它在智能手机上全屏显示时，用户假设该模式是一个页面，然后单击“返回”以“关闭”它。我们已经在右上角的X中包含了，但也希望使用“后退”按钮关闭模式。有人有什么想法吗谢谢最简单的方法是让用户感觉到它的弹出窗口或模型不是一个新页面，方法是使用一些边距或使它有10个偏移量另一种解决方法是打开和关闭方法，如下所述最好的方法是 <SCRIPT type="text/javascript">

我发现这是智能手机的问题，可能与台式机有关。我们已经“修改”了我们的引导模式，使其具有响应性，但是当它在智能手机上全屏显示时，用户假设该模式是一个页面，然后单击“返回”以“关闭”它。我们已经在右上角的X中包含了，但也希望使用“后退”按钮关闭模式。有人有什么想法吗

谢谢

最简单的方法是让用户感觉到它的弹出窗口或模型不是一个新页面，方法是使用一些边距或使它有10个偏移量

另一种解决方法是打开和关闭方法，如下所述

最好的方法是

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


window.history.forward（）；
函数noBack（）{window.history.forward（）；}

描述

要从iFrame控制后退按钮，请尝试此操作可能会有所帮助（未测试）


window.parent.history.forward（）；
函数noBack（）{window.parent.forward（）；}

多亏了

您可以通过编写几行代码来实现这一点，但是您需要一种更好的方法来实现一致的结果，即按下浏览器/手机后退按钮并使用[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')
    }
}

谢谢，有点工作，但混乱的模态，我将有一个更深入的研究。干杯。谢谢@SlimGG-我一直在看这个，它在家长页面上很有用。然而，我正在使用一个iFrame，并尝试将代码放在iFrame头部内容中，但它不起作用。我想我正在寻找一个只有在模式打开时才禁用后退按钮的功能。你可以使用window.parent.document访问父窗口。更多信息，我们在移动应用程序中遇到了与Bootstrap3.0模式完全相同的问题。我们还使用了AngularJS 1.4.7。我们修复了此处提到的此问题。不过，上述答案只有在您使用AngularJS时才相关。

// 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 = ''
})

// 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')
    }
}