单击浏览器后退按钮时，引导模式关闭但模式下拉保持 [英] When browser back button is clicked, bootstrap modal is closed but modal-dropback stays

问题描述

我正在使用带有引导程序的 Backbone.问题是当您浏览应用程序时，在某些时候您打开引导模式窗口并按下后退按钮，模式窗口关闭但模式背景 div(模式背景)保持不变并且不会消失.它覆盖整个屏幕，你不能点击任何东西.我注意到，当您关闭模态时，模态背景 div 通常会从 html 中删除，并且在这种情况下它会保留.

I am using Backbone with bootstrap. Problem is when you go through application and in some point you open bootstrap modal window and press back button, modal window closes but modal background div (modal-backdrop) stays and does not disappear. It overlays whole screen and you cant click on anything. I noticed that when you close modal normally modal-backdrop div is removed from html and in this situation it stays.

我在网上搜索这个解决方案，发现了类似的东西，但没有一个是按下浏览器后退按钮的潮流.

I was searching for this solution on web, and found similar things, but none of them were tide with browser back button pressed.

我想过捕获浏览器后退按钮事件和用户 jquery 以删除该 div，但这不是一个很好的解决方案.

I thought about catching browser back button event and user jquery to remove that div, but that is not really good solution.

有人能指出一些解决这个问题的方法吗?或者最后告诉我为什么会这样.

Can someone point out some solutions for this problem? Or at last tell me why is that happening.

当按下后退按钮时，模态不会抛出 hide.bs.modal 事件，所以我无法抓住它并删除模态背景 div

When back button is pressed, modal does not throw hide.bs.modal event, so i cant catch it and remove modal-backdrop div

推荐答案

我们在使用 AngularJS_v1.4.7 和 Bootstrap_v3.0 开发的 Web 和移动应用程序中遇到了这个问题.预期的行为(在整个应用程序中)是 Popup 应该关闭并且页面转换不应该发生.换句话说，后退按钮只是关闭弹出窗口，没有别的.

We encountered this problem in Web and Mobile Application developed using AngularJS_v1.4.7 and Bootstrap_v3.0. The expected behavior (across the application) was, Popup should close and page transition should NOT happen. In other words, back button just closes the popup and nothing else.

以下修复工作正常，

//Detect location change
$rootScope.$on('$locationChangeStart', function(event, newUrl, oldUrl) {
        // Select open modal(s)
        var $openModalSelector = $(".modal.fade.in"); 
        if( ($openModalSelector.data('bs.modal') || {}).isShown == true){
            // Close open modal(s)
            $openModalSelector.modal("hide");
            // Prevent page transition
            event.preventDefault();
        }
    });

此修复已成功测试，

• 桌面上的 Chrome 浏览器
• Windows 8.1 手机
• 安卓棒棒糖

这篇关于单击浏览器后退按钮时，引导模式关闭但模式下拉保持的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！