Bootstrap - 模态在隐藏时保持“显示：块”

Posted 2023-05-08

【中文标题】Bootstrap - 模态在隐藏时保持“显示：块”

【英文标题】：Bootstrap - Modal keeps "display: block" when hidden

【发布时间】：2015-07-16 13:09:36

【问题描述】：

我的网络应用程序中有一个引导模式，即使在我启动 myModal.modal('close'); 时它也会一直显示。我被这个奇怪的问题困住了。

大约。十分之一，我有那个display: block;在关闭后留下。模式已正确隐藏，因为我再也看不到它了，但它覆盖了我的整个页面，我无法点击任何内容。

我试图用以下方式处理关闭：

$('#myModal').on('hidden.bs.modal', function () 
  $(this).css('display', 'none !important');
)

这不起作用，模态div仍然有style="display: block;"

【问题讨论】：

你能创建一个演示吗

important 不适用于 jQuery .css()

您应该尝试重现您的问题，以便我们看到它，因为正如您所说，这很奇怪

如果位置正确，您也许可以将 z-index 设置回去。或者尝试像 margin-left 或 margin-top - 500000 px

myModal.modal('hide'); 不起作用吗？

【参考方案1】：

试试这些，让我知道它们是否有效。

$('selector').css('z-index', '-999');
$('selector').css('margin-left', '-50000');
$('selector').css('margin-top', '-50000');

【讨论】：

是的，成功了！只是强制 z-index: -999; 隐藏和 z-index: 1000; 显示就可以了。但这仍然是一种解决方法。

有时你必须做最快的事情，然后去做更重要的事情。 :) 很高兴我能帮上忙。

【参考方案2】：

我的第一个问题是：您是否有一个自定义样式表，您可能会在其中覆盖 #myModal 的样式？如果是这样，请努力解决。

我的第二个问题是：您使用的是什么版本的 Bootstrap？我在 2012 年看到过类似的错误记录。如果可能，请升级到最新版本的 Bootstrap (3.3.4)。

我的第三个问题是：你点击什么来关闭？是关闭按钮（ type="button" class="close" ）还是带有 data-dismiss="modal" 属性的按钮？

如果关闭按钮，只要页面上没有其他模态，你可以试试这个：

$(".close").on( "click", function() 
    $("#myModal").hide();
);

这可能也值得一试（虽然，不是推荐的方法）：

$("#myModal").on("hide",function()
    $("#myModal").css("display", "none");
);

最终，我同意 Amit 和 Yerko 建议的需要演示，因为这看起来很奇怪。我从来没有遇到过这样的事情，而且我已经用了很长时间了。