Question

I want to insert something inside the modal window using Ajax, so I tried to manually open the modal window. The code looks like this

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

The HTML is copied straight from bootstrap js page

<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>

So the problem is clicking the button the first time seems to work just fine, after the second click the modal window shows for 1 second or so and then disappears. If I change ‘toggle’ to ‘show’, after the second click the backdrop won’t fade out completely. How can I debug this?

Answer 1

The way you are currently performing actions is likely the cause of the flickering. Essentially, what you are telling the browser is: update the content after the div has been shown. You are also telling jQuery to bind the onShow event EVERY time the link is clicked. That bind declaration should be made outside of the onClick event.

What you should try, is to change your modal content BEFORE displaying it, allowing the browser to adjust the DOM appropriately before displaying it, reducing (if not eliminating) the flicker.

Try something more like this:

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