4

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

谢谢

4

5 回答 5

14

感谢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');
        }
    });
于 2016-10-14T01:33:22.160 回答
3

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

另一种方法是此处描述的 Open and Close 方法

最好的方法是

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

在这里描述

要从 iFrame 控制后退按钮，试试这个可能会有所帮助（未经测试）

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

于 2013-06-01T07:15:10.293 回答
2

您可以通过编写几行代码来做到这一点，但是您需要一种更好的方法来获得一致的结果，其中按下浏览器/移动设备后退按钮并使用 [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')
    }
}
于 2020-02-14T11:18:37.523 回答
1

我使用此代码，它也适用于单个页面中的多个模式：

$('#myModal').on('show.bs.modal', function (e) {
   window.history.pushState('#myModal', "Modal title", document.location+'#myModal');
}).on('hide.bs.modal', function (e) {
   if ( window.history.state === '#myModal' ) {
   history.go(-1);
   }
})

然后附加一个“hashchange”事件监听器来隐藏后退按钮的模式：

window.addEventListener("hashchange", function(e) {
    $('#myModal').modal('hide');
})
于 2021-12-09T13:58:54.767 回答
0

这是我如何使用 BootstrapDialog 插件...每个弹出窗口 3 个单行（这允许多个弹出窗口，并且只有最近的在后面关闭）

//Within the BootstrapDialog INIT...
ContactInfosDialog = BootstrapDialog.show({
    data: ...
//Add to history so Back button closes popup instead of going back.
 onshown: function() {location.hash +=          '-popContactInfos';},
//Go back on history when closing popup, so Back button works for page next time
onhidden: function() {if (location.hash.indexOf('-popContactInfos') > -1)
                       {history.back();}
                     },
   title: ...
     etc: ...
                                         });

//Anywhere outside the BootstrapDialog INIT...
//Back button will just move back history on first click,
//below will make it also close the popup.
$(window).on('hashchange', function() 
                     {if (location.hash.indexOf('-popContactInfos')===-1)
                       {ContactInfosDialog.close();}
                     }
            ); 

/*
HOW IT WORKS:
1) Setting location.hash will add a hashtag #name to the URL.
I use += to add to the hash name, so multiple popups would be url#-pop1-pop2
2) When the popup is closed, history.back will back up one step to url#-pop1
3) hashchange lets you look at the url#{popups-list} when the url  changes,  
and if your popup name isn't in the list we know to close it.
*/
于 2021-12-31T01:49:02.457 回答