Why Bootstrap modal backdrop lag?

Question

I'm using Bootstrap's modal backdrop dynamically and am having an issue with lag. The scenario is that I have a div that shows information retrieved from a server. When I double click on that div, it grows, becomes modal and shows me more detailed information about that element. As seconds go on, the lag gets greater and when I check the chrome dev tools, it seems my Bootstrap backdrop comes in (though I can't see it), then seconds later it will actually show with the information.

Here's code with a link to its jsFiddle below:

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

The link is http://jsfiddle.net/ukL48/1/ but I can't reproduce the problem. I guess the main difference between the fiddle and the project is that I'm not grabbing anything from a server on the fiddle. Any ideas?

Martavis P. Martavis P. · Accepted Answer · 2013-11-16T00:09:57

Turns out this was not at fault of the Bootstrap modal code, but the double click. Many people know that double clicking interferes with the single click, however my code does not explicitly use the single click event for that element. That '.rect' element uses a dragging (jQuery) event, which inadvertently means using the single click. I had to use a library to do long-press until finding something that causes these two events not to clash.

Why Bootstrap modal backdrop lag?

1 Answers