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

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

Answer 2

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

就我而言，我在悬停时有一种口吃/忽悠/讨人喜欢的模态。解决方案是：请勿将模态放在使用z-index的元素（例如或）内，如下面所述将模态代码放在外部：https://github.com/twbs/bootstrap/issues/25206