我希望在移动设备的“返回”按钮被点击时关闭弹出窗口。我使用onhashchange实现了这一点：
window.onhashchange = function (event) {
};
$(window).bind('beforeunload', function(e) {
return false;
});
如何在按下后退按钮时关闭弹出窗口并重定向到上一个页面？
if (window.history && window.history.pushState) {
$('#myModal').on('show.bs.modal', function (e) {
window.history.pushState('forward', null, './#modal');
});
$(window).on('popstate', function () {
$('#myModal').modal('hide');
});
}
onload时会收到一个错误的onpopstate。 - user5490177当我测试我的答案时，bootply.com网站挂了。请参阅下面代码底部的内联脚本和注释。其余部分只是Twitter Bootstrap样板，以便我可以轻松地在本地测试。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>modal.html</title>
<!-- Bootstrap -->
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<p>If you press the back button now, you should return to whatever page you were on before this page.</p>
<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">Show me the modal!</button>
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
<h4 class="modal-title" id="myModalLabel">Modal title</h4>
</div>
<div class="modal-body">
<p>If you press the web browser's back button OR the modal's close buttons, the modal will close and the hash will return to "modal.html#modalClosed".</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script type="text/javascript">
// Immutable hash state identifiers.
var closedModalHashStateId = "#modalClosed";
var openModalHashStateId = "#modalOpen";
/* Updating the hash state creates a new entry
* in the web browser's history. The latest entry in the web browser's
* history is "modal.html#modalClosed". */
window.location.hash = closedModalHashStateId;
/* The latest entry in the web browser's history is now "modal.html#modalOpen".
* The entry before this is "modal.html#modalClosed". */
$('#myModal').on('show.bs.modal', function(e) {
window.location.hash = openModalHashStateId;
});
/* When the user closes the modal using the Twitter Bootstrap UI,
* we just return to the previous entry in the web
* browser's history, which is "modal.html#modalClosed". This is the same thing
* that happens when the user clicks the web browser's back button. */
$('#myModal').on('hide.bs.modal', function(e) {
window.history.back();
});
</script>
</body>
</html>
//Modal Closer With Back Button Support (Uses EventDelegation, so it works for ajax loaded content too.)
(function() {
var activeOpenedModalId = null;
var isHidingModalByPopState = false;
$(document).on('show.bs.modal', '.modal', function() {
activeOpenedModalId = $(this).attr('id');
window.location.hash = activeOpenedModalId;
}).on('hide.bs.modal', '.modal', function() {
if(!isHidingModalByPopState) {
window.history.back();
}
isHidingModalByPopState = false;
activeOpenedModalId = null;
});
$(window).on('popstate', function() {
if(activeOpenedModalId && window.location.hash !== '#'+activeOpenedModalId) {
isHidingModalByPopState = true;
$("#" + activeOpenedModalId).modal('hide');
}
});
})();
window.onload=function(){
State=0;
$(".modal").on("show.bs.modal",function(){
path=window.location.pathname+window.location.search;
history.pushState("hide",null,path);
history.pushState("show",null,path);
State="show";
})
.on("hidden.bs.modal",function(){
if(!!State)
history.go(State=="hide"?-1:-2);
});
setTimeout(function(){// fix old webkit bug
window.onpopstate=function(e){
State=e.state;
if(e.state=="hide"){
$(".modal").modal("hide");
}
};
},999);
$("#myModal").modal("show");
};
$(document).ready 替代 window.onload。 $('#myModal').on('show.bs.modal', function(e) {
window.location.hash = "modal";
});
$(window).on('hashchange', function (event) {
if(window.location.hash != "#modal") {
$('#myModal').modal('hide');
}
});
只需要将以下代码添加到脚本中：
//update url to current url + #modal-open. example: https://your-url.test/home#modal-open
$('body').on('shown.bs.modal', '.modal', function () {
location.hash = '#modal-open'
})
//remove #modal-open from current url, so the url back to: https://yoururl.test/home
$('body').on('hidden.bs.modal', '.modal', function () {
location.hash = ''
})
//when user press back button
$(window).on('hashchange', function (e) {
if(location.hash == ''){
$('.modal').modal('hide')
}
})
即使模态框被打开和关闭多次，上述代码仍然可以完美运行。
*注意： jQuery 3.^ Bootstrap 4.^
使用Apache Cordova可以轻松实现此操作，但不确定您是否在使用它来显示您的网页。
function onBackKeyDown(e) {
e.preventDefault();
}
document.addEventListener("backbutton", onBackKeyDown, false);
http://cordova.apache.org/docs/en/2.4.0/cordova_events_events.md.html#backbutton
function onBackKeyDown(e){ e.preventDefault(); $(".modal").modal("hide"); } - user5490177点击返回按钮后，自动激活$('.modal').hide()函数。因此不需要隐藏模态框。在点击返回按钮后，我们可以看到灰色阴影背景。您可以使用以下任意一行代码来关闭模态弹出窗口。
或者
$('body').removeClass('modal-open');
$('.modal-backdrop').remove();
当模态框处于活动状态时，请检查页面以查看这些类。如果此方法有误或存在其他简单的方法，请指正我。
我不喜欢哈希。而且这段代码中没有url中的哈希
onModalMounted() => {
if (isMobile) {
history.pushState('modalShow', "", path); // add history point
window.onpopstate = (e) => {
e.stopPropagation()
e.preventDefault()
closeModalFn() // your func close modal
history.replaceState('', "", path);
window.onpopstate = () => {} // stop event listener window.onpopstate
}
} else {
window.onpopstate = (e) => {
e.stopPropagation()
e.preventDefault()
closeModalFn() // your func close modal
window.onpopstate = () => {} // stop event listener window.onpopstate
}
}
}
我的Angular解决方案
// push history state when a dialog is opened
dialogRef.afterOpened.subscribe((ref: MatDialogRef<any, any>) => {
window.history.pushState(ref.id, '');
// pop from history if dialog has not been closed with back button, and gurrent state is still ref.id
ref.afterClosed().subscribe(() => {
if (history.state === ref.id) {
window.history.go(-1);
}
});
});