Bootstrap Модал сразу исчезает

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

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

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

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

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

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

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

Итак, я удалил bootstrap.min.js из моего bundle.config и все работало нормально.

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

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

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

Исправлено удаление одной из двух строк. Действительно, gem readme предупреждает вас об этой ошибке. Мой плохой.

Для меня работала удаление

data-toggle="modal"

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

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

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

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

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

См. пример: http://embed.plnkr.co/i5xB1WbX7zgXrbDMhNAW/preview

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

e.preventDefault(); с jquery ui

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

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

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

В моем случае у меня был только один файл bootstrap.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>

Я столкнулся с тем же симптомом, который показал @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>

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

ПРИМЕЧАНИЕ. У меня недостаточно репутации, чтобы просто добавить комментарий или ссылку вверх, и я почувствовал, что могу добавить немного разъяснений.

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

    <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>

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

<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"> Надеюсь, это сработает для вас.

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

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

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

Я назвал modal в javascript, используя      $ ( '# ModalId') модальный ( 'шоу');.

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

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

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

Затем я редактирую этот код кнопки следующим образом

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

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

посмотрите, поможет ли это вам.

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

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

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

В итоге я добавил "#" в href, чтобы ссылка никуда не шла, и она решила мою проблему.

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

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

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

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

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