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

【问题标题】：Bootstrap Modal remains on back button click - mobile onlyBootstrap Modal 保持在后退按钮单击 - 仅限移动设备
【发布时间】：2015-08-18 11:57:26
【问题描述】：

在移动设备上，当我点击返回按钮时，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');
});

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

如果能在确定解决方案时提供帮助，我将不胜感激。

谢谢。

斯蒂芬

【问题讨论】：

标签： javascript mobile twitter-bootstrap-3

【解决方案1】：

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

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

或者

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

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

【讨论】：

不幸的是，这些都没有解决问题。模态仍然存在。我也手动从我的 html 中删除了淡入淡出。
能否提供链接
它在 Intranet 上，所以我必须重新创建一个测试版本。无论如何，我能够通过在进入下一页之前“杀死”模式（使用上面的第二种方法）来解决问题。那工作得很好。谢谢。

【解决方案2】：

我们在使用 AngularJS_v1.4.7 和 Bootstrap_v3.0 开发的 Web 和移动应用程序中遇到了这个问题。它已按照以下链接中的说明进行修复。看看它是否适合你。

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

【讨论】：