Twitter Bootstrap模态窗口闪烁问题

Question

我想使用Ajax在模态窗口中插入内容，因此我尝试手动打开模态窗口。 代码如下：

    $(function(){
        $('#modal-from-dom').modal({
            backdrop: true,
            keyboard: true
        });
        $('#modalbutton').click(function(){

            $('#my-modal').bind('show', function () {
                // do sth with the modal
            });
            $('#modal-from-dom').modal('toggle');

            return false;
        });
    });

这个 HTML 是直接从 Bootstrap JS 页面复制的。

<div id="modal-from-dom" class="modal hide fade">
    <div class="modal-header">
      <a href="#" class="close">×</a>
      <h3>Modal Heading</h3>
    </div>
    <div class="modal-body">
      <p>One fine body…</p>
    </div>
    <div class="modal-footer">
      <a href="#" class="btn primary">Primary</a>
      <a href="#" class="btn secondary">Secondary</a>
    </div>
</div>
<button id="modalbutton" class="btn">Launch Modal</button>

所以问题在于第一次单击按钮时似乎正常工作，但在第二次单击后，模态窗口会显示1秒左右然后消失。如果我将“toggle”更改为“show”，则在第二次单击后，背景不会完全淡出。如何调试此问题？

- user1009183

---

.modal() 是某种插件吗？#my-modal 是什么，你在做什么？可能的问题是你在每次点击时绑定了 show 事件，并且它会干扰你的切换。 - Ilia G

此问题已关闭。我已更新问题中的代码。 - user1009183

请发布您的解决方案。 - JSuar

另一种解决方案是禁用背景（data-backdrop="false"），如果您不需要它：<div class="modal fade" data-backdrop="false"…>；请参阅 https://dev59.com/QWEi5IYBdhLWcg3wwegN#36087387。 - 0x6d6c

Answer 1

您目前执行操作的方式可能是闪烁的原因。实际上，您告诉浏览器的是：在显示div之后更新内容。您还告诉jQuery每次单击链接时都要绑定onShow事件。应该将绑定声明放在onClick事件之外。

您应该尝试在显示模态框之前更改其内容，使浏览器能够在显示之前适当调整DOM，从而减少（如果不是完全消除）闪烁。

尝试类似以下的代码：

$(function(){
    $('#modal-from-dom').modal({
        backdrop: true,
        keyboard: true
    });
    $('#modalbutton').click(function(){

        // do what you need to with the modal content here

        // then show it after the changes have been made

        $('#modal-from-dom').modal('toggle');
        return false;
    });
});

- NeoNexus DeMortis

---

你好，你的回答帮了我很多。问题是当我想关闭弹出窗口时，它不会平滑地切换回去，而只是立即消失。你能帮我解决这个问题吗？ - Imnotapotato

Answer 2

在 <ul> || <ol> 中解决模态框问题

我遇到了一个在悬停时出现卡顿/闪烁/抖动的模态框问题。解决方法是：不要将模态框放在使用 z-index 的元素内，例如 <li> 或 <div>，请按照此处提到的方法将模态框代码放在外部：https://github.com/twbs/bootstrap/issues/25206

- Kerim Yagmurcu

---

在我看来，这是更好的方式。 - aasutossh

Answer 3

这种情况是因为.list-gorup-item:hover的z-index: 1引起了一个新的堆叠上下文。您可以通过使用z-index: 1来解决它。

.list-group-item, .list-group-item:hover{ z-index: 1 }

- SantoshK

Answer 4

*if you get error like ... modal is not a function  so u can do like this also *

$("#open-modal").click(function () {
    // outhum credit
    $("#modal-from-dom").show();
    $(".modal").css("background", "#333333ab");
    return false;
  });

- Pinki Sharma