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


jquery twitter-bootstrap modal-dialog
person Community    schedule 23.10.2011    source источник
comment
.modal() это какой-то плагин? Что такое #my-modal и что вы с ним делаете? Вероятно, проблема в том, что вы привязываете событие show к каждому щелчку, и оно делает что-то, что мешает вашему переключению.   -  person Ilia G    schedule 08.01.2012
comment
Этот вопрос закрыт. Я обновил код вопроса.   -  person    schedule 08.01.2012
comment
Пожалуйста, опубликуйте свое решение.   -  person JSuar    schedule 30.01.2012
comment
Другое решение - отключить фон, если он вам не нужен (data-backdrop="false"): <div class="modal fade" data-backdrop="false"…>; см. stackoverflow.com/a/36087387/2784517   -  person mi6th    schedule 07.07.2021

Ответы (3)


arrow_upward
2
arrow_downward

То, как вы в данный момент выполняете действия, вероятно, является причиной мерцания. По сути, вы говорите браузеру: обновляйте контент после того, как 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;
    });
});
person NeoNexus DeMortis    schedule 13.02.2012
comment
Привет, твой ответ мне очень помог. Дело в том, что когда я хочу закрыть всплывающее окно, оно не переключается обратно, а просто исчезает сразу, а не плавно. Вы можете мне с этим помочь? - person W.Doch; 29.08.2016

arrow_upward
1
arrow_downward

РЕШЕНИЕ ДЛЯ МОДАЛОВ В <ul> || <ol>

В моем случае у меня было заикание / мерцание / лестница при наведении. Решение: не размещайте модальное окно внутри элемента, который использует, например, z-index, или размещайте код для модального окна снаружи, как указано здесь: https://github.com/twbs/bootstrap/issues/25206

person Kerim Yagmurcu    schedule 07.12.2019
comment
Это лучший способ пойти имо. - person aasutossh; 13.02.2021

arrow_upward
0
arrow_downward

Это происходит потому, что z-index: 1 в .list-gorup-item: hover вызывает новый контекст стекирования. вы можете решить, используя z-index: 1

.list-group-item, .list-group-item:hover{ z-index: 1 }
person SantoshK    schedule 20.09.2020