Модальное окно Twitter Bootstrap мерцает

Question

Я хочу вставить что-то в модальное окно, используя Ajax, поэтому я попытался вручную открыть модальное окно.Код выглядит следующим образом

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

HTML-код копируется прямо со страницы начальной загрузки js

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

Таким образом, проблема заключается в нажатии кнопки в первый раз, когда она работает нормально, послевторой щелчок показывает модальное окно в течение 1 секунды или около того, а затем исчезает.Если я переключу «переключение» на «показ», после второго щелчка фон не исчезнет полностью.Как я могу отладить это?

Answer 1

Способ мерцания, который вы выполняете в данный момент, вероятно, является причиной мерцания. По сути, вы говорите браузеру: обновите контент после показа div. Вы также говорите jQuery связывать событие onShow КАЖДЫЙ раз при нажатии на ссылку. Это объявление привязки должно быть сделано вне события onClick.

Что вам следует попробовать, так это изменить свой модальный контент ДО его отображения, позволяя браузеру соответствующим образом настроить DOM перед его отображением, уменьшая (если не устраняя) мерцание.

Попробуйте что-то еще подобное:

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