Подтвердить что ты не робот

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

Я хочу вставить что-то внутри модального окна с помощью 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 секунды или около того, а затем исчезает. Если я переключу 'toggle' на 'show', после второго щелчка фоном не будет полностью исчезать. Как я могу отладить это?

4b9b3361

ОТВЕТЫ

Ответ 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;
    });
});