Question

在移动设备上，当我按下后退按钮时，Bootstrap 3模式仍然存在。

这是我的HTML代码：

<a id="link-prof" href="" class="dark-blue" data-toggle="modal" data-target="#leavingModal">Link Here<span class="glyphicon glyphicon-chevron-right"></span></a><

<div id="leavingModal" class="modal fade" role="dialog">
    <div class="modal-dialog">
        <div class="modal-content">
            <a class="close-btn" data-dismiss="modal"></a>
            <div class="modal-body">
                <h4 class="modal-title">You are now leaving this page</h4>
                <p>Text here and here</p>
            </div>
        <div class=" text-center">
            <button type="button" class="btn btn-lg btn-link" data-dismiss="modal">Cancel</button>
            <button id="link-hcp" type="button" class="btn btn-lg btn-danger" data-dismiss="modal" data-href="http://www.anotherpage.com" data-target="_self">I Agree</button>
        </div>
    </div>
</div>

我的JavaScript文件中也有这个（不确定它是否对问题有任何影响）：

$('button').on(touchClick,function(){
    var loc = $(this).attr("data-href");
    if(loc!='' && loc!=null) window.location = loc;
});

当我点击链接时，会出现模态。然后我点击模态上的“我同意”按钮，然后进入新页面。在桌面上，当我点击后退按钮时，模态不再存在。我将不得不再次单击该链接以显示模式（这是所需的）。但是，在移动设备上（我试过iPad和Android），当按下后退按钮时，模态仍然存在。

经过一番研究，我发现了这段代码：

$('#leavingModal').on('hidden.bs.modal', '.modal', function () {
    $(this).removeData('bs.modal');
});

......但它甚至没有开火。我尝试了不同的选择器也没有成功。

我很感激在确定解决方案方面提供了一些帮助。

感谢。

斯蒂芬

Answer 1

要完全破坏bootstrap 3模型，你可以这样做

$("#leavingModal").on('hidden.bs.modal', function () {
    $(this).data('bs.modal', null);
});

或者

$("#leavingModal").removeClass('fade').modal('hide')

注意：对模态的过渡效果可能会导致问题，您需要从模态中删除.fade类以完全隐藏它。

Answer 2

我们在使用AngularJS_v1.4.7和Bootstrap_v3.0开发的Web和移动应用程序中遇到此问题。它是固定的，如下面链接所述。看看它是否与你相关。

https://stackoverflow.com/a/34351848/1069893

Bootstrap Modal保持在后退按钮单击 - 仅限移动

2 个答案: