Почему Bootstrap модальный фон отставание?

Question

Я использую модальный фон Bootstrap динамически, и у меня проблема с задержкой. Сценарий заключается в том, что у меня есть div, который показывает информацию, полученную с сервера. Когда я дважды нажимаю на этот div, он растет, становится модальным и показывает мне более подробную информацию об этом элементе. По прошествии секунд отставание увеличивается, и когда я проверяю инструменты chrome dev, кажется, что мой исходный фон 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/, но я не могу воспроизвести проблему. Я предполагаю, что основное различие между скрипкой и проектом заключается в том, что я не собираю ничего с сервера на скрипке. Есть идеи?

Answer 1

Оказывается, это не было ошибкой модального кода Bootstrap, но двойной щелчок. Многие люди знают, что двойной щелчок мешает одному клику, однако мой код явно не использует одно событие click для этого элемента. Этот элемент .rect использует событие перетаскивания (jQuery), которое непреднамеренно означает использование одного клика. Я должен был использовать библиотеку, чтобы делать длинный пресс, пока не найду что-то, что заставляет эти два события не сталкиваться.