Twitter引导模式背景不会消失

我正在使用Twitter引导模态对话框。当我点击引导模式对话框的提交按钮时，它会发送一个AJAX请求。我的问题是情态背景并没有消失。模态对话框确实消失了，但是“模态背景”在屏幕上创建的不透明度仍然存在

我该怎么办?

当前回答

updatepanel issue。

我的问题是由于更新面板的位置。我在更新面板上有整个模式。如果你在更新面板之外声明了模态在更新面板中只有模态主体，那么 $ (' # myModalID ') .modal(隐藏的); 工作。

2014-02-04 15:38:12

其他回答

在动作按钮中插入:

data-backdrop="false"

and

data-dismiss="modal"

例子:

<button type="button" class="btn btn-default" data-dismiss="modal">Done</button>

<button type="button" class="btn btn-danger danger" data-dismiss="modal" data-backdrop="false">Action</button>

如果你输入这个data-attr， .modal- background将不会出现。关于它的文档在这个链接:http://getbootstrap.com/javascript/#modals-usage

2015-05-21 12:09:06

对我来说，最好的答案是。

<body>
<!-- All other HTML -->
<div>
    ...
</div>

<!-- Modal -->
<div class="modal fade" id="myModal">
    ...
</div>

模式标记放置始终尝试将模态的HTML代码放在文档的顶层位置，以避免其他组件影响模态的外观和/或功能。

从这个SO答案

2018-03-13 23:20:11

这个问题也会发生，如果你隐藏，然后再次显示模式窗口太快。这一点在其他地方提到过，但我将在下面提供更多细节。

这个问题与时间和渐变过渡有关。如果你在前一个模式的淡出过渡完成之前显示了一个模式，你会看到这个持续的背景问题(模式背景会以你的方式留在屏幕上)。Bootstrap显式地不支持多个同时的模态，但这似乎是一个问题，即使你隐藏的模态和你显示的模态是相同的。

如果这是你的问题的正确原因，这里有一些缓解问题的选择。选项#1是一个快速而简单的测试，可以确定渐隐过渡时间是否确实是问题的原因。

禁用模态的Fade动画(从对话框中删除Fade类) 更新模态的文本，而不是隐藏并重新显示它。修正时间，使它不会显示模态，直到它完成隐藏前一个模态。使用模态的事件来做到这一点。http://getbootstrap.com/javascript/#modals-events

这里有一些相关的引导问题跟踪帖子。追踪者的帖子可能比我下面列出的要多。

https://github.com/twbs/bootstrap/issues/735 https://github.com/twbs/bootstrap/issues/2839 https://github.com/twbs/bootstrap/issues/19385

2016-04-21 16:50:57

我也遇到过类似的问题:在我的模式窗口中，我有两个按钮，“取消”和“确定”。最初，这两个按钮都将通过调用$('#myModal').modal('hide')来关闭模式窗口(前面有"OK"执行一些代码)，场景如下:

打开模态窗口做一些操作，然后点击“确定”是否验证他们并关闭模式再次打开模态并通过点击“取消”来取消重新打开模式，再次点击“取消”==>背景不再可访问!

好吧，我旁边的同事帮了我大忙:不用调用$('#myModal').modal('hide')，而是给你的按钮赋予data-dismiss="modal"属性，并在你的"Submit"按钮中添加一个"click"事件。在我的问题中，按钮的HTML(好吧，TWIG)代码是:

<button id="modal-btn-ok" class="btn" data-dismiss="modal">OK</button>
<button id="modal-btn-cancel" class="btn" data-dismiss="modal">Cancel</button>

在我的JavaScript代码，我有:

$("#modal-btn-ok").one("click", null, null, function(){
    // My stuff to be done
});

而没有“点击”事件归因于“取消”按钮。模态现在正确关闭，让我再次使用“正常”页面。实际上，似乎data-dismiss="modal"应该是指示按钮(或任何DOM元素)应该关闭Bootstrap模式的唯一方法。modal('hide')方法的行为似乎不太可控。

希望这能有所帮助!

2013-03-19 10:09:21

确保在执行AJAX请求时没有替换包含实际模态窗口的容器，因为Bootstrap在尝试关闭它时将无法找到对它的引用。在Ajax完整处理程序中删除模态，然后替换数据。

如果这不起作用，你可以通过以下方法强迫它消失:

$('#your-modal-id').modal('hide');
$('body').removeClass('modal-open');
$('.modal-backdrop').remove();

2012-07-18 15:26:22

Twitter引导模式背景不会消失

推荐文章

最新文章

标签