twitter-bootstrap 如何使用浏览器后退按钮关闭引导模式而不是返回页面？`
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16870007/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
how to close a bootstrap modal with the browser back button instead of going back a page?`
提问by steve0nz
I have found this an issue with smartphones and it can relate to desktops. We have 'modded' our bootstrap modal to be responsive, however when displayed on a smartphone it is in full screen, the user assumes the modal is a page and clicks back to 'close' it. We have included the in the top right X but would also like the back button to close the modal. Anyone have any ideas?
我发现这是智能手机的一个问题，它可能与台式机有关。我们已经“修改”了我们的引导程序模态以使其具有响应性，但是当它在智能手机上显示为全屏时，用户认为模态是一个页面并单击返回以“关闭”它。我们在右上角的 X 中包含了 ，但也希望后退按钮关闭模态。有人有想法么？
Thanks
谢谢
采纳答案by Gaurav Gandhi
Easiest way is to make user feel that its pop-up or model not a new page, by using some margins or making it span10 offset1 kind of.
最简单的方法是让用户感觉它的弹出窗口或模型不是一个新页面，通过使用一些边距或使其span10 offset1 之类的。
Another way around is Open and Close method which is described here
另一种解决方法是此处描述的打开和关闭方法
And the best method is
最好的方法是
<SCRIPT type="text/javascript">
window.history.forward();
function noBack() { window.history.forward(); }
</SCRIPT>
</HEAD>
<BODY onload="noBack();"onpageshow="if (event.persisted) noBack();" onunload="">
Described here
此处描述
for controlling back button from iFrame, try this may help (not tested)
为了从 iFrame 控制后退按钮，试试这可能会有所帮助（未测试）
<SCRIPT type="text/javascript">
window.parent.history.forward();
function noBack() { window.parent.forward(); }
</SCRIPT>
</HEAD>
回答by Raymond Ativie
A better way i found thanks to http://www.mylearning.in/2015/06/close-modal-pop-up-on-back-button.html
感谢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');
}
});
回答by Armin Hemati Nik
You can do that by writing a few lines of code however you'll need a better method in order to achieve a consistent result in which pressing the browser/mobile back button AND hiding modal using [x] button or clicking outside the modal work identical.
您可以通过编写几行代码来做到这一点，但是您需要一种更好的方法来获得一致的结果，即按下浏览器/移动后退按钮并使用 [x] 按钮隐藏模态或在模态外单击工作相同.
I consider the following method a better solution in that sense. it works on modern browsers (HTML5 Javascript ES6) with Bootstrap 4.0 or higher but you'd be able to adapt it for older browser support.
从这个意义上说，我认为以下方法是更好的解决方案。它适用于具有 Bootstrap 4.0 或更高版本的现代浏览器（HTML5 Javascript ES6），但您可以对其进行调整以支持较旧的浏览器。
1- Assign a data-hash="#some-hash"attribute to all of the modals that you want to close via browser back button.
1-data-hash="#some-hash"为要通过浏览器后退按钮关闭的所有模式分配一个属性。
2- the block responsible for appending hash to the url
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- listen to hide.bs.modalevent and determine if the back button is pressed or not
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- the block responsible to handle browser back button. we add the pushbackattribute as a flag to indicate back button press event.
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')
}
}
