Twitter-бутстрап модального фона не исчезает

Убедитесь, что ваш первоначальный вызов $.modal(), чтобы применить модальное поведение, не передается в большее количество элементов, чем вы планировали. Если это произойдет, это приведет к созданию модального экземпляра в комплекте с элементом фона для элемента EACH в коллекции. Следовательно, это может выглядеть так, что задний фон остался позади, когда на самом деле вы смотрите на один из дубликатов.

В моем случае я пытался создать модальный контент "на лету" с некоторым кодом вроде этого:

myModal = $('<div class="modal">...lots of HTML content here...</div><!-- end modal -->');
$('body').append(myModal);
myModal.modal();

Здесь комментарий HTML после закрывающего тега </div> означал, что myModal на самом деле представляет собой коллекцию jQuery из двух элементов - div и комментарий. Оба они были послушно превращены в модалы, каждый со своим собственным элементом фона. Конечно, модальность, сделанная из комментария, была незаметна, кроме фона, поэтому, когда я закрыл настоящий модальный (div), он выглядел так, как будто фон был оставлен.

Я слишком долго занимался этой проблемой:)

В то время как другие предоставленные ответы являются полезными и действительными, мне показалось немного беспорядочным, чтобы эффективно воссоздать функциональные функции скрытия от Bootstrap, поэтому я нашел более чистое решение.

Проблема в том, что существует цепочка событий, которые происходят, когда вы вызываете

$("#myModal").modal('hide');
functionThatEndsUpDestroyingTheDOM()

Когда вы заменяете кучу HTML в результате запроса AJAX, модальные скрывающие события не заканчиваются. Однако Bootstrap запускает событие, когда все завершено, и вы можете подключиться к нему так:

$("#myModal").modal('hide').on('hidden.bs.modal', functionThatEndsUpDestroyingTheDOM);

Надеюсь, что это будет полезно!

Вставьте в свою кнопку действия следующее:

data-backdrop="false"

и

data-dismiss="modal" 

Пример:

<button type="button" class="btn btn-default" data-dismiss="modal">Done</button>

<button type="button" class="btn btn-danger danger" data-dismiss="modal" data-backdrop="false">Action</button>

если вы введете этот data-attr, то .modal-backdrop не появится. документацию по этой ссылке: http://getbootstrap.com/javascript/#modals-usage

Если вы используете копию и вставляете с самого сайта getboostrap в селектор, созданный html, убедитесь, что вы удалили комментарий '<! -/.modal → '. Bootstrap запутывается и думает, что комментарий является вторым модальным элементом. Он создает другую обратную капли для этого "второго" элемента.

Эта проблема также может возникать, если вы скрываете, а затем слишком быстро показываете модальное окно. Это было упомянуто в другом месте для вопроса, но я расскажу подробнее.

Проблема связана с синхронизацией и переходом на постепенный переход. Если вы покажете модальность до того, как переход на постепенный переход к предыдущему модальному завершен, вы увидите эту проблему с постоянным фоном (модальный фон останется на экране, на вашем пути). Bootstrap явно не поддерживает несколько одновременных модалов, но это кажется проблемой, даже если модальный, который вы скрываете, и модальный, который вы показываете, одинаковы.

Если это правильная причина для вашей проблемы, вот несколько вариантов смягчения проблемы. Вариант № 1 - это быстрый и простой тест, чтобы определить, действительно ли время перехода к затуханию является причиной вашей проблемы.

• Отключите анимацию Fade для модального (удалите класс "fade" из диалога)
• Обновить текстовый текст вместо скрытия и повторного отображения его.
• Исправить время так, чтобы оно не отображало модальное значение до тех пор, пока оно не закончит скрывать предыдущий модальный. Используйте модальные события для этого. http://getbootstrap.com/javascript/#modals-events

Ниже приведены некоторые связанные с этим вопросы загрузки бутстрапа. Возможно, что есть больше сообщений трекера, чем показано ниже.

• https://github.com/twbs/bootstrap/issues/735
• https://github.com/twbs/bootstrap/issues/2839
• https://github.com/twbs/bootstrap/issues/19385

У меня была аналогичная проблема: в моем модальном окне у меня есть две кнопки: "Отмена" и "ОК" . Первоначально обе кнопки закрывали модальное окно, вызывая $('#myModal').modal('hide') (с "ОК" , ранее выполнявшим некоторый код), и сценарий был бы следующим:

• Открытие модального окна
• Сделайте несколько операций, затем нажмите "ОК" , подтвердите их и закройте модальные
• Снова отпустите режим и отпустите, нажав "Отмена"
• Откроем модальный, снова нажмите "Отмена" == > фон больше не доступен!

ну, мой сосед следующий стол спас мой день: вместо вызова $('#myModal').modal('hide'), дайте вашим кнопкам атрибут data-dismiss="modal" и добавьте событие "click" к вашей кнопке "Отправить". В моей проблеме код HTML (ну, TWIG) для кнопки:

<button id="modal-btn-ok" class="btn" data-dismiss="modal">OK</button>
<button id="modal-btn-cancel" class="btn" data-dismiss="modal">Cancel</button>

и в моем JavaScript-коде я:

$("#modal-btn-ok").one("click", null, null, function(){
    // My stuff to be done
});

в то время как событие "click" не относится к кнопке "Отмена". Теперь модально закрывается правильно и позволяет снова играть с "нормальной" страницей. На самом деле кажется, что data-dismiss="modal" должен быть единственным способом указать, что кнопка (или любой элемент DOM) должна закрыть модальность Bootstrap. Метод .modal('hide'), кажется, ведет себя не вполне контролируемым образом.

Надеюсь, это поможет!

.modal( 'скрыть')

В ручном режиме скрывается модальный. Возврат к вызывающему абоненту до того, как модал действительно был скрыт (т.е. до появления события hidden.bs.modal).

Итак, вместо

$('#myModal').modal('hide');
$('#someOtherSelector').trigger('click');

делать

$('#myModal').modal('hide');
$('#myModal').on('hidden.bs.modal', function() {
   $('#someOtherSelector').trigger('click');
});

Итак, вы обязательно дождитесь завершения события "Скрыть".

Даже я столкнулся с аналогичной проблемой, у меня были следующие две кнопки

<button id="confirm-delete-btn" >Yes, Delete this note.</button>
<button id="confirm-delete-cancel" data-dismiss="modal">No</button>

Я хотел выполнить некоторую операцию ajax и на успех этой операции ajax закрыть модальный. Итак, вот что я сделал.

$.ajax({
        url: '/ABC/Delete/' + self.model.get("Id")
            , type: 'DELETE'
            , success: function () {                    
                setTimeout(function () {
                    self.$("#confirm-delete-cancel").trigger("click");
                }, 1200);
            }
            , error: function () {}
        });

Я вызвал событие щелчка кнопки "Нет", у которого было свойство data-dismiss="modal". И это сработало:)

Я знаю, что это очень старый пост, но это может помочь. Это очень маленький обходной путь для меня

$('#myModal').trigger('click');

Вот это, это должно решить проблему

использование:

$('.modal.in').modal('hide') 

Источник

Это решение для Ruby on Rails 3.x и файла js.erb, который перестраивает часть DOM, включая модальный. Он работает независимо от того, вызван ли вызов ajax из модального или из другой части страницы.

if ($("#my-modal").attr("aria-hidden") === "false") {
  $("#my-modal").modal('hide').on('hidden.bs.modal', function (event) {
    functionThatEndsUpDestroyingTheDOM();
  });
} else {
  functionThatEndsUpDestroyingTheDOM();
}

Благодаря @BillHuertas для начальной точки.

Другая точка зрения на этот вопрос. (Я использую версию bootstrap.js 3.3.6)

Я ошибочно инициализирую модальный как вручную, так и в javascript:

$('#myModal').modal({
   keyboard: false
})

и используя

data-toggle="modal"

в этой кнопке, как показано ниже (показано в документе)

<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">Launch demo modal</button>

поэтому в результате создается два экземпляра

<div class="modal-backdrop fade in"></div>

присоединяйтесь к телу моего html, когда открываете модальный. Это может быть причиной закрытия модальности с помощью функции:

$('#myModal').modal('hide');

он удаляет только один экземпляр заднего плана (как показано выше), поэтому фон не исчезнет. Но он исчез, если вы используете data-dismiss="modal" add on html как show в документе bootstrap.

Таким образом, решение моей проблемы заключается в том, чтобы только инициализировать модальное вручную в javascript и не использовать атрибут данных. Таким образом, я могу как закрыть модальное вручную, так и с помощью data-dismiss="modal".

Надеюсь, это поможет, если вы столкнулись с той же проблемой, что и я.

Другая возможная ошибка, которая может вызвать эту проблему,

Убедитесь, что вы не включили bootstrap.js script более одного раза на свою страницу!

проблема обновления.

Моя проблема возникла из-за размещения пакета обновлений. У меня был весь модальный в обновлении. Если вы объявляете модальный вне поля обновления и просто говорите, что модальное тело на панели обновления, то   $ ( '# MyModalID') модальность ( 'шкура'). работал.

. $ ( '# MyModal') триггер ( 'щелчок');

Это сработало для меня. Он не закрывается, потому что когда вы открываете всплывающее окно, он запускает 2 или 3 модальных фона. Поэтому, когда вы делаете $ ('# myModal')). Modal ('hide'); это влияет только на один модальный фон и остальное остается.

Убедитесь, что вы не используете один и тот же элемент Id/class в другом месте для элемента, не связанного с модальным компонентом.

То есть.. если вы определяете свои кнопки, которые вызывают модальные всплывающие окна, используя имя класса 'myModal', убедитесь, что нет несвязанных элементов, имеющих такое же имя класса.

Используя toggle вместо hide, решила мою проблему

FYI, если кто-то столкнется с этим еще... Я потратил около 3 часов, чтобы узнать, что лучший способ сделать это:

$("#my-modal").modal("hide");
$("#my-modal").hide();
$('.modal-backdrop').hide();
$("body").removeClass("modal-open");

Эта функция для закрытия модальности очень неинтуитивна.

Я была такая же проблема. Для меня проблемой был закрытый тег div на странице. Дух.

У меня была такая же проблема при попытке отправить форму. Решением было изменить тип кнопки с submit на button а затем обработать событие нажатия кнопки следующим образом:

'click .js-save-modal' () {
    $('#myFormId').submit();
    $('#myModalId').modal('hide');
}

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

        element.on("shown.bs.modal", function () {
            if ($(".modal-backdrop").length > 1) {
                $(".modal-backdrop").not(':first').remove();
            }
            element.css('display', 'block');
        });

для меня лучший ответ таков.

<body>
<!-- All other HTML -->
<div>
    ...
</div>

<!-- Modal -->
<div class="modal fade" id="myModal">
    ...
</div>

Размещение модальной разметки Всегда старайтесь размещать модальный HTML-код в позиции верхнего уровня в вашем документе, чтобы избежать других компонентов, влияющих на модальный внешний вид и/или функциональность.

из этого так ответ

Добавление data-dismiss="modal" на любые кнопки в моем модальном режиме для меня. Я хотел, чтобы моя кнопка вызывала функцию с помощью angular, чтобы запустить ajax-вызов и закрыть модальный, поэтому я добавил .toggle() внутри функции, и она работала хорошо. (В моем случае я использовал bootstrap modal и использовал некоторый angular, а не фактический модальный контроллер).

<button type="button" class="btn btn-primary" data-dismiss="modal"
ng-click="functionName()"> Do Something </button>

$scope.functionName = function () {
angular.element('#modalId').toggle();
  $.ajax({ ajax call })
}

У меня была аналогичная проблема. Я использовал Boostrap в сочетании с Backbone, и я захватывал клики кнопки "Сделай это", а затем прекратил распространение этих событий. Необычно, это сделало модальный уйти, но не фон. Если я вызываю event.preventDefault(), но не вызываю stopPropagation(), все работает нормально.

Попробуйте это

$('#something_clickable').on('click', function () {
  $("#my_modal").modal("hide");
  $("body").removeClass("modal-open");
  $('.modal-backdrop').remove();
 });

Это отлично работает для меня.

Из https://github.com/twbs/bootstrap/issues/19385

Модальные методы show/hide являются асинхронными. Поэтому код, например:

foo.modal("hide"); bar.modal("show"); недействителен. Вам нужно подождать показывая/скрываясь, чтобы закончить (прослушивая показанные/скрытые события; видеть http://getbootstrap.com/javascript/#modals-events) перед вызовом показать или скрыть методы снова.

У меня была эта проблема, когда я дважды открывал один и тот же модальный режим, поэтому простое исправление проверяло, было ли это уже показано, а затем снова не показывать:

$('#modalTitle').text(...);
$('#modalMessage').text(...);
if($('#messageModal').is(':hidden')){
    $('#messageModal').modal('show');
}

В ASP.NET добавьте обновление для UpdatePanel по коду после jquery. Пример:

    ScriptManager.RegisterStartupScript(Page, Page.GetType(), "myModal", "$('#myModal').modal('hide');", true);
    upModal.Update();

У меня была проблема с замораживанием экрана в фоновом режиме, но в несколько другом сценарии: когда отображались 2 обратных к модам. например Первый попросит подтверждение сделать что-то, и после нажатия кнопки "подтвердить" действие натолкнутся на ошибку, а второй модальный будет отображаться для всплытия сообщения об ошибке. Второй модальный фон заморозит экран. Не было никаких столкновений в именах классов или id элементов.

Способ устранения проблемы заключался в том, чтобы предоставить браузеру достаточно времени для обработки модального фона. Вместо того, чтобы немедленно принять действие после нажатия "подтвердить", дайте браузеру сказать 500 мс, чтобы скрыть 1-й модальный и очистить задний фон и т.д. - затем выполните действие, которое закончится показанием ошибки.

<button type="button" class="btn btn-red" data-dismiss="modal" on-tap="_dialogConfirmed">Confirm</button>
...

Функция _dialogConfirmed() имеет следующий код:

    var that = this;

    setTimeout(function () {
      if (that.confirmAction) {
        (that.confirmAction)();
        that.confirmAction = undefined;
      }
    }, 500);

Я предполагаю, что другие решения работают, потому что они занимают достаточно времени, предоставляя браузеру необходимое время очистки.

начальное значение вашего атрибута данных может быть

"static", "true", "false" .

static и true добавить модальную тень, а false отключить тень, поэтому вам просто нужно изменить это значение с помощью первого щелчка к ложному. например:

$(document).on('ready',function(){
	
	var count=0;
	
$('#id-which-triggers-modal').on('click',function(){
		
		if(count>0){
		
			$(this).attr('data-backdrop','false')
		}
		count++;
});


});

//Create modal appending on body
myModalBackup = null;
$('#myModal').on('hidden.bs.modal', function(){
       $('body').append(myModalBackup.clone());
    myModalBackup = null;
});

//Destroy, clone and show modal
myModalBackup = $('#myModal').clone();
myModalBackup.find('.modal-backdrop').remove();
$('#myModal').modal('hide').remove();
myModalBackup.find('.info1').html('customize element <b>1</b>...');
myModalBackup.find('.info2').html('customize element <b>2</b>...');                             
myModalBackup.modal('show');

скрипт → https://jsfiddle.net/o6th7t1x/4/

Я работаю с Meteor, и у меня такая же проблема. Причиной моей ошибки было следующее:

{{#if tourmanager}}
    {{>contactInformation tourmanager}}
{{else}}
    <a href="#addArtistTourmanagerModal" data-toggle="modal"><i class="fa fa-plus"></i> Tourmanager toevoegen</a>
    {{>addArtistTourmanagerModal}}
{{/if}}

Как вы можете видеть, я добавил модальность в else, поэтому, когда мой модальный обновил контактную информацию, if имел другое состояние. Это привело к тому, что модальный шаблон был исключен из DOM незадолго до его закрытия.

Решение: переместите модальное из if-else:

{{#if tourmanager}}
    {{>contactInformation tourmanager}}
{{else}}
    <a href="#addArtistTourmanagerModal" data-toggle="modal"><i class="fa fa-plus"></i> Tourmanager toevoegen</a>
    {{>addArtistTourmanagerModal}}
{{/if}}

У меня была такая же проблема.

Однако я использовал bootbox.js, поэтому он мог бы что-то с этим сделать.

В любом случае, я понял, что проблема вызвана наличием элемента с тем же классом, что и родительский. Когда один из этих элементов используется для привязки функции щелчка для отображения модальности, возникает проблема.

то есть. вот что вызывает проблему:

<div class="myElement">
    <div class="myElement">
        Click here to show modal
    </div>
</div>

измените его так, чтобы элемент, на который был нажат, не имеет того же класса, что и его родительский, любой из них - дети или любые другие предки. Это, вероятно, хорошая практика, чтобы сделать это в целом при привязке функций щелчка.

У меня была та же проблема. Я обнаружил, что это произошло из-за конфликта между Bootstrap и JQueryUI.

Оба используют класс "close". Изменение класса в том или ином исправляет это.

В проекте .net MVC4 у ​​меня появилось модальное всплывающее окно (bootstrap 3.0) внутри Ajax.BeginForm(OnComplete = "addComplete" [дополнительный код удален]). Внутри javascript "addComplete" у меня был следующий код. Это решило мою проблему.

$( '# moreLotDPModal') скрыть();.

$( "# moreLotDPModal" ). data ('bs.modal'). isShown = false;

$( 'тело') removeClass ( 'модальных открытой');.

$( 'модальное-фон'.) Удалить();.

$( '# moreLotDPModal') removeClass ( "в" );.

$('# moreLotDPModal'). attr ('aria-hidden', "true" );