Bootstrap modal исчезают сразу после показа

Ответ 1

У меня была эта проблема, и решение было простым... Я загружал как bootstrap.js И bootstrap-modal.js.

bootstrap.js включает bootstrap-modal.js.

Решение: удалите bootstrap-modal.js из head, и он будет работать правильно.

Ответ 2

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

<a role="menuitem" tabindex="-1" href="#" data-toggle="modal" data-target="#myModal" id="deleteItemButton">Delete Item</a>

$ultodoListDisplay.on( "click", "#deleteItemButton",  function(){
    $('#myModal').modal('toggle');
});

Ссылки на Bootstrap CDN и таблицы стилей были правильными. Поэтому определите переключатель модального окна только один раз.

Ответ 3

Если кто-то использует twitter bootstrap modal на мобильном сайте, есть большой шанс, что вы можете использовать jquerymobile. Если это так, вы, вероятно, столкнетесь с этой конкретной проблемой бутстрак-модальной диссипации на вас. Я обнаружил, что проблема связана с классом ".fadein" из jquerymobile, который переопределял класс ".fadein" из начальной загрузки, заставляя скрывать модальное окно.

Вы можете исправить это по-своему. Мой подход, так как я действительно не использовал fade in from jquery mobile, я прокомментировал это и Voila! модальный диалог вернулся. Надеюсь, это поможет кому-то.:)

Ответ 4

Попробуйте удалить класс "hide" в этой строке:

div#makeDream.modal.hide.fade

Чтобы читать как это:

div#makeDream.modal.fade

Также обратите внимание, что в зависимости от версии Bootstrap, которую вы используете, кнопка для открытия модала может быть записана как (перевести на html slim):

<a class="btn" data-toggle="modal" data-backdrop="true" data-keyboard="true" href="#makeDream">Open Modal</a>

Ответ 5

вы должны добавить bootstrap-model.js в нижней части веб-страницы, a также проблема, я пытался с другим плагином, мы можем использовать еще один плагин, но перед использованием подумайте о bootstrap-model.js.....

Ответ 6

У меня была такая же проблема, я был включен как bootstrap.js, так и bootstrap.min.js, затем я удалил один из них и решил проблему

Ответ 7

bootstrap.min.js вызывает эту проблему, удаляя ее, решает проблему, если он все еще не работает

jQuery(document).on('click','#SendMail',function(){ 
 jQuery("#fixerrormodal").modal('toggle');   
});

это поможет

Ответ 8

В моем случае модалы отлично работали с атрибутами, но при вызове .modal('show') из js он сразу скрывался. Проблема была решена, когда я поставил bootstrap.js в нижний колонтитул, но я не знаю, почему он не работал в заголовке после всех объявлений css и jquery.

Ответ 9

У меня была та же проблема, при загрузке страницы, на основе переменной сеанса, я показывал модальный, и он исчез, когда я использовал $('# myModal'). modal ('show'), My problem got разрешен с использованием метода триггера jquery, в используемой мной ссылке для входа

$(window).load(function(){ $('#loginlink').trigger('click'); });

Ответ 10

У меня была эта проблема, потому что у меня было два варианта "bootstrap/min.js", один с CDN ref, а другой был Script file ref, комментируя один из них, дал мне несколько неактивных выпадающих меню из моего раскрывающегося списка меню

Я просто зашел в Nuget Packet Manager и обновил "jQuery Validate Unobtrusive для Bootstrap 3", он решил мою проблему: -)

Ответ 11

В моем случае я использовал тему wordpress plug-in "wp-jubhunt" и "_tk", и оба загружали bootstrap.js, поэтому отключение bootstrap.js в плагине работало для меня.

Ответ 12

В моем случае у меня была кнопка, которая вызывала модальный...

<asp:Button ID="btnSearch" runat="server" Width="100%" Text="Select
Action" class="btn btn-info btn-sm" data-backdrop="static"
data-toggle="modal" data-target="#myModalID"></asp:Button>

Я сменил кнопку на тег привязки и отлично работает

<a href="#" ID="btnShowModal" class="btn btn-info btn-sm"
data-backdrop="static" data-toggle="modal" style="width:100%;"
data-target="#myModalID">Select Action</a>

Это было после того, как я проверил, что я не загружал дубликаты файлов javascript для начальной загрузки. Bootstrap.min.js или boostrap.js. Достаточно одного.

Ответ 13

Вы можете просто удалить атрибуты data-toggle="modal" и data-target="#myModalID" от кнопки или тега привязки. Это переключает модальный, и вы импортировали bootstrap.min. js два или более, что переключает его!

Вместо этого напишите прослушиватель событий onClick для кнопки и вручную включите модальный: $('#myModal').modal();