Question

当我向用户显示错误消息时，我使用以下脚本打开模态消息：

jQuery('#errorDialog').modal({
    keyboard: false,
    show: true,
    backdrop: 'static'
});

效果很好，并按照我的意愿显示消息。

问题在于，当我使用浏览器中的后退按钮时，它会将我带到历史记录中的上一页（一切都很好），但背景仍然在屏幕上。

我尝试删除backdrop: 'static'行，当我点击背景上的任意位置时，该行会解除模态消息。然而，当回到上一页时它仍然存在。

当我使用后退按钮（或浏览浏览器历史记录）时，有没有办法将其删除？

Answer 1

如果您正在使用SPA javascript框架（例如Vue，React或Angular），则正常的做法是当按下后退按钮时，引导程序或jQuery UI背景仍然可见。

原因是因为背景div通常插入到DOM的顶部，并且在按下向后时，它只是将节点重新放到DOM的更下方。

例如，解决方案是检测每个历史记录更改并执行：

$(".modal-backdrop").remove()

例如，对于Vue，可以在vue-router中完成，如下所示：

router.beforeEach((to, from, next) => {
  $(".modal-backdrop").remove();
  next();
});

Answer 2

我使用backbone.js时遇到了类似的问题。对于其他遇到此问题的人。这是我修复它的黑客。

我在myRouter中有一个函数可以加载我对路径更改的看法。

loadView: function(view) {

    var _this = this;

    if (_this.currentView) {
        _this.currentView.close();
    }

    _this.currentView = view;
    _this.currentView.render();

    // Render view to dom
    $(".content").html(_this.currentView.el);

    // Set opacity of modal backdrop to 0
    $('.modal-backdrop').css('opacity', 0);

} //,

然后在路由更改时，您只需调用loadView：

index: function() {

    _this.loadView(new IndexView());

} //,

Bootstrap模式 - 当我使用浏览器中的后退按钮时，背景会停留

2 个答案: