Бутстрап модальный сразу исчезает

у меня была та же проблема, но она имела другую причину. Я следовал документации и создал кнопку Вот так:

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

когда я щелкнул его, оказалось, что ничего не произойдет. Однако кнопка была в <form> Это было временно просто получение той же страницы.

я исправил это путем добавления type="button" к элементу кнопки, чтобы он не отправлял форму при нажатии.

Я некоторое время искал дубликат ссылки на bootstrap в моем приложении mvc, после других полезных ответов на этот вопрос.

наконец - то нашел его-он был включен в другую библиотеку, которую я использовал, так что не было очевидно вообще! (datatables.net).

если вы все еще получаете эту проблему, ищите другие библиотеки, которые могут включать bootstrap для вас. (datatables.net позволяет указать загрузку с загрузкой или без нее-другие делают то же самое).

поэтому я удалил bootstrap.min.js от меня bundle.config и все работало нормально.

тот же симптом, в контексте приложения Rails с загрузкой, предоставленной bootstrap-sass gem, и ответ @merv поставил меня на правильный путь.

мой application.js файл имел следующее:

//= require bootstrap
//= require bootstrap-sprockets

исправление состояло в том, чтобы удалить одну из двух строк. Действительно, readme драгоценного камня предупреждает вас об этой ошибке. Моя ошибка.

для меня то, что работало, было удалить

data-toggle="modal"

С помощью кнопки. Сама кнопка может быть любой элемент - ссылку, див, кнопки и т. д.

e.preventDefault(); с jQuery ui

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

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

проблема также может возникнуть, если с помощью jquery вы дважды прикрепляете прослушиватель событий. Например, вы бы поставили без развязки:

            $("body").on("click","#fixerror",function(event){
                $("#fixerrormodal").modal('toggle')
            })

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

            $("body").on("click","#fixerror",function(event){
                $("#fixerrormodal").modal()
                $("#fixerrormodal").modal('toggle')
            })

см. exemple:http://embed.plnkr.co/i5xB1WbX7zgXrbDMhNAW/preview

я столкнулся с тем же симптомом, что @gpasse показал в своем примере. Вот мой код...

<form...>
  <!-- various inputs with form submit --->

  <!-- button opens modal to show dynamic info -->
  <button id="myButton" class="btn btn-primary">Show Modal</button>
</form>

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

<script>
  $( '#myButton' ).click( function() {
    $( '#myModal' ).modal();
  )};
</script>

как предположил @ Bhargav, моя проблема была связана с кнопкой, пытающейся отправить форму и перезагрузить страницу. Я изменил кнопку на <a> ссылка следующим образом:

<a href="#" id="myButton" class="btn btn-primary">Show Modal</a>

...и это исправило проблему.

Примечание: у меня нет достаточно репутации, чтобы просто добавить комментарий или upvote еще, и я чувствовал, что могу добавить немного разъяснений.

в моем случае, у меня был только один прихлоп.js, jquery.JS-файл включен, но все еще получает такой тип ошибки, и мой код для кнопки был примерно таким:

<script type="text/javascript">
$(document).ready(function(){
   $("#bttn_<?php echo $rnt['id'];?>").click(function(){
      $("#myModal_<?php echo $rnt['id'];?>").modal('show');
   });
});
</script>

Я просто добавил e. preventDefault (); к нему и это сработало как шарм.

Итак, мой новый код, как показано ниже:

<script type="text/javascript">
$(document).ready(function(){
  e.preventDefault();
  $("#bttn_<?php echo $rnt['id'];?>").click(function(){
     $("#myModal_<?php echo $rnt['id'];?>").modal('show');
  });
});
</script>

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

#myModal {
  -webkit-transform: translate3d(0, 0, 0);
}

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

    <input  type='submit' name='submitname' id="partyBtn" value='Submit' title='Click to submit.'/>

до

    <input  type='button' name='submitname' id="partyBtn" value='Submit' title='Click to submit.'/>

и это исправило проблему исчезновения.

в моем случае, нажатие на кнопку вызывает (не хотел) перезагрузка страницы.

вот мое решение:

<button class="btn btn-success" onclick="javascript: return false;" 
data-target="#modalID" data-toggle="modal">deaktivieren</button>

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

Я вызвал modal в javascript с помощью

 $('#ModalId').modal('show');

перед ошибкой я использую эту кнопку

<a href="" onclick="return Edit();" class="btn btn-primary">Edit</a>

у меня нет значения для свойства href в этой кнопке, поэтому я столкнулся с проблемой.

затем я редактирую этот код кнопки, как это

 <a href="#" onclick="return Edit();" class="btn btn-primary">Edit</a>

тогда проблема решается просто ошибка из-за отсутствия # в первом.

посмотрим, если это будет полезно для вас.

У меня была такая же проблема, работая над проектом с asp.NET. я использовал bootstrap 3.1.0 решил его понижение до Bootstrap 2.3.2.

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

<a type="submit" class="btn btn-primary" data-toggle="modal" href="#myModal">Submit</a> 

изменить кнопку, чтобы привязать тег он должен работать, проблема возникает из-за его типа кнопки, как он пытается представить так модальный исчезает немедленно.а также удалить скрыть от модального прятаться исчезать дают <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> Надеюсь, это сработает для вас .

У меня тоже была такая проблема, если кнопка находится внутри тег затем модальный появляется один раз и исчезает достаточно скоро, взяв кнопку из формы исправлена isue. Спасибо, что я оказался в этой теме! +1 ко всем.

в моем случае, у меня был CDN включен в голову приложения.формат html.erb, а также установил драгоценный камень "jquery-rails", который, как я предполагаю, благодаря документации и сообщениям выше, является избыточным.

Я просто прокомментировал CDN (ниже) из главы приложения.формат html.erb и модальный соответственно остается открытым.

<!--<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>-->

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

код ниже отображал модальный и который сразу же исчез:

<a href="" onclick="do_some_stuff()">Hey</a>

Я закончил тем, что добавил ' # ' в href, поэтому ссылка никуда не денется, и это решило мою проблему.

<a href="#" onclick="do_some_stuff()">Hey</a>

Я знаю, что это старый, но вот еще одна вещь, чтобы проверить - убедитесь, что у вас есть только один атрибут data-target=. Я продублировал его, и результат был в соответствии с этой нитью.

я добавил bootstrap в мой проект через bower, затем я импортировал и после . (Кнопка, которая открывает модальный находится внутри формы). Я просто удаляю импорт для modal.js и это работает для меня.

в случае, если кто-то использует codeigniter 3 bootstrap с datatable.

ниже мое исправление в config / ci_boostrap.php

//'assets/dist/frontend/lib.min.js',
//lib.min.js has conflict with datatables.js and i removed it replace with jquery.js
'assets/dist/frontend/jquery-3.3.1.min.js',
'assets/dist/frontend/app.min.js',
'assets/dist/datatables.js'

пришлось столкнуться с той же проблемой. Причина та же, что и @merv. Вопрос был с календарь компонента добавлен на страницу.Сам компонент добавляет модальную функцию, которая будет использоваться во всплывающем окне календаря.

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

• загрузка нескольких версий/файлов bootstrap js (уменьшено ...)
• добавление внешнего календаря на страницу, где находится bootstrap используется
• добавление пользовательского оповещения или всплывающей библиотеки на страницу
• любая другая библиотека, которая добавляет всплывающее поведение

работая с Angular(5), я сталкиваюсь с той же проблемой, но в моем случае я решил следующим образом: