Twitter Bootstrap modal window flickers

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?

Is `.modal()` a plugin of some sort? What is `#my-modal` and what are you doing with it? Likely the issue is that you are binding `show` event on every click and it does something that screws your toggle up. — Ilia G, Jan 08 '12 at 04:22
This question is closed. I've updated the code in the question. — , Jan 08 '12 at 18:42
Another solution is to disable the backdrop if you don't need it (`data-backdrop="false"`): `
`; see https://stackoverflow.com/a/36087387/2784517 — 0x6d6c, Jul 07 '21 at 07:56

score 3 · Accepted Answer · answered Feb 13 '12 at 01:10

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

Hi, your answer helped me a lot. The thing is that when I want to close the popup, it doesn't toggle back up - but just disappear immediately and not smoothly. Can you help me out with this? — Imnotapotato, Aug 29 '16 at 11:01

score 1 · Answer 2 · answered Dec 07 '19 at 22:04

1

SOLUTION FOR MODALS IN <ul> || <ol>

In my case I had a stuttering/flickering/flattering modal on hover. The solution is: Don't place your modal inside of an element, that uses z-index, for example or , put your code for the modal outside as mentioned here: https://github.com/twbs/bootstrap/issues/25206

answered Dec 07 '19 at 22:04

Kerim Yagmurcu

166
10

This is the better way to go imo. – aasutossh Feb 13 '21 at 05:57

score 0 · Answer 3 · answered Jun 25 '20 at 07:40

0

*if you get error like ... modal is not a function  so u can do like this also *

$("#open-modal").click(function () {
    // outhum credit
    $("#modal-from-dom").show();
    $(".modal").css("background", "#333333ab");
    return false;
  });

answered Jun 25 '20 at 07:40

Pinki Sharma

1

SantoshK · Answer 4 · 2020-09-20T10:38:51.217

0

This occurs because the z-index: 1 of a .list-gorup-item:hover cause a new stacking context. you can resolved by using z-index:1

.list-group-item, .list-group-item:hover{ z-index: 1 }

edited Sep 20 '20 at 10:38

answered Sep 20 '20 at 10:30

SantoshK

1,789
16
24

Twitter Bootstrap modal window flickers

4 Answers4