Twitter Bootstrap 模态窗口闪烁

Posted 2023-05-08

【中文标题】Twitter Bootstrap 模态窗口闪烁

【英文标题】：Twitter Bootstrap modal window flickers

【发布时间】：2011-12-13 10:31:57

【问题描述】：

我想使用 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 秒左右然后消失。如果我将“切换”更改为“显示”，第二次单击后背景不会完全消失。我该如何调试？

【问题讨论】：

.modal() 是某种插件吗？ #my-modal 是什么，你在用它做什么？可能的问题是您在每次点击时都绑定了show 事件，它会做一些事情来搞砸您的切换。

此问题已结束。我已经更新了问题中的代码。

请发布您的解决方案。

另一个解决方案是在不需要时禁用背景 (data-backdrop="false"): <div class="modal fade" data-backdrop="false"…>;见***.com/a/36087387/2784517

【参考方案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;
    );
);

【讨论】：

您好，您的回答对我帮助很大。问题是，当我想关闭弹出窗口时，它不会重新切换 - 而是立即消失并且不顺利。你能帮我解决这个问题吗？

【参考方案2】：

<ul> 中的模态解决方案@ || <ol>

在我的情况下，我在悬停时有一个口吃/闪烁/讨人喜欢的模态。解决方案是：不要将模态框放在使用 z-index 的元素内，例如，或者，将模态框的代码放在外面，如下所述：https://github.com/twbs/bootstrap/issues/25206

【讨论】：

这是更好的 imo 方式。

【参考方案3】：

*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;
  );

【参考方案4】：

发生这种情况是因为 .list-gorup-item:hover 的 z-index: 1 会导致新的堆叠上下文。您可以使用 z-index:1 解决

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