Question

我的模态窗口有一个小问题，由于某种原因，我无法解决这个问题。在移动设备上，我有一个汉堡包菜单，在该菜单中我有一个登录链接，打开一个模态窗口。一切正常，模态显示但问题是：下拉菜单显示在我的模态之上。

我试图隐藏它：

$(document).ready(function() {

  var modal = $('.modal'); //get modal window

  if(modal.hasClass("in")){ //check if it has class "in"
    $('.navbar-toggleable-md').hide(); //true, hide navbar
  }

}); // end ready

我错过了什么？因为上面的代码没有做任何事情......

Answer 1

我认为我们的模型上存在z-index问题。增加模态的z-index。或者请向我们提供您的代码的小提琴。

Answer 2

您需要在show.bs.modal上抓住shown.bs.modal或.modal的事件。像这样：

$(document).ready(function() {
    $('.modal').on('shown.bs.modal', function (e) {
        $('.navbar-toggleable-md').hide();
});
});

阅读bootstrap文档：modals-events

Answer 3

将模式的z-index设置为大于下拉列表的z-index。例如：

.modal {
    z-index: 999;
}
.dropdown {
    z-index: 99;
}

模态显示时隐藏下拉列表

3 个答案: