javascript - 为什么 Bootstrap 模态背景滞后？

Question

我正在动态使用 Bootstrap 的模态背景，但遇到了延迟问题。场景是我有一个显示从服务器检索到的信息的 div。当我双击那个 div 时，它会变大，变成模态并向我显示有关该元素的更多详细信息。随着时间的流逝，延迟变得越来越大，当我检查 chrome 开发工具时，我的 Bootstrap 背景似乎出现了(虽然我看不到)，然后几秒钟后它实际上会显示信息。

下面是带有指向其 jsFiddle 链接的代码:

<div id="container">
    <div class="rect">Double Click Me!</div>
</div>

<div id='mask' class='modal fade'>
    <div class="modal-container"> </div>     
</div> 

$('.rect').dblclick(function()
{
    var clonedElem = $('.modal-container');

    clonedElem.css({'width' : '35%', 'height' : '90%'});
    clonedElem.offset({left : ($(window).width()/3) });

    clonedElem.html(function()
    {
        var html = '<h4>Big Rectangle</h4>';
        return html;    
    });

    $('#mask').modal();
});

链接是http://jsfiddle.net/ukL48/1/但我无法重现问题。我想 fiddle 和项目之间的主要区别是我没有从 fiddle 上的服务器上获取任何东西。有任何想法吗？

Answer 1

事实证明，这不是 Bootstrap 模态代码的错误，而是双击的错误。许多人都知道双击会干扰单击，但我的代码并未明确为该元素使用单击事件。该“.rect”元素使用拖动 (jQuery) 事件，无意中意味着使用单击。我不得不使用一个库来长按，直到找到导致这两个事件不发生冲突的东西。