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

Я работаю над сайтом с помощью начальной загрузки.

По сути, я хотел использовать модал на домашней странице, вызванный кнопкой в ​​Hero Unit.

Код кнопки:

<button type="button" 
    class="btn btn-warning btn-large" 
    data-toggle="modal"
    data-target="#myModal">Open Modal</button>

Модальный код:

<div class="modal hide fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
    <h3 id="myModalLabel">In Costruzione</h3>
  </div>
  <div class="modal-body">
    <p>Test Modal: Bootstrap</p>
  </div>
  <div class="modal-footer">
    <button class="btn" data-dismiss="modal" aria-hidden="true">Chiudi</button>
    <button class="btn btn-warning">Salva</button>
  </div>
</div>

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

Буду признателен за любую помощь.

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

Вероятная причина

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

• bootstrap.js (полный пакет BootStrap JS)
• bootstrap.min.js (так же, как и выше, только что уменьшенный)
• bootstrap-modal.js (автономный плагин)
• загрузчик зависимостей, например, require('bootstrap')

Советы по отладке

Хорошее место для начала - осмотреть зарегистрированных clickслушателей событий с помощью инструментов разработчика в вашем браузере. Например, в Chrome будет указан исходный файл JS, в котором можно найти код для регистрации прослушивателя. Другой вариант заключается в попытке поиска источников на странице для фразы , найденной в коде модальной, например, var Modal.

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

A (Сломанный) Демо

Вот демонстрация того, что происходит, когда вы загружаете и bootstrap.js, и bootstrap-modal.js (просто для подтверждения вашего опыта):

Plunker

Если вы прокрутите вниз до источника на этой странице, вы можете удалить или закомментировать <script>строку для bootstrap-modal.js, а затем проверить, что теперь модал будет работать так, как ожидалось.

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

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

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

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

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

data-toggle="modal"

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

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

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

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

Так что я снял bootstrap.min.jsс моего bundle.configи все работало нормально.

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

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

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

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

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

e.preventDefault(); с JQuery UI

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

Проблема также может возникнуть, если с помощью 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

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

... и это решило проблему.

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

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

    <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.'/>

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

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

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

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

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

Вот мое исправление:

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

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

Я назвал модальный в 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>

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

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

Еще одна причина / решение! Я имел в своем коде JS:

$("#show_survey").click(function() {
  $("#survey_modal").modal("show")
})

Но мой HTML-код уже был написан как:

<a class="small-text link" data-target="#survey_modal" data-toggle="modal" href="#" id="show_survey">Take a quick 7 question survey!</a>

Так что это еще одна перестановка того, как дублирование вводило код и заставляло модальное окно открываться, а затем закрываться. В моем случае data-targetи data-toggleв html согласно документации Bootstrap уже запускается модальный режим. Поэтому код JS является избыточным, и после удаления он работает.

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

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

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

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

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

Я просто закомментировал CDN (ниже) из главы application.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-dismiss="modal"

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

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

в случае, если кто-то использует codeigniter 3 с начальной загрузкой данных.

ниже мое исправление в 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. Проблема связана с тем, что на страницу добавлен компонент календаря. Сам компонент добавляет модальную функцию, которая будет использоваться во всплывающем окне календаря.

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

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

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

component.html

<button type="button" class="btn btn-primary"  data-target="#myModal" 
(click)="showresult()">fff</button>

<div class="modal" id="myModal" role="dialog"  tabindex="-1" data-backdrop="false">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title">Modal title</h5>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <div class="modal-body">
          <p>Modal body text goes here.</p>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-primary">Save changes</button>
          <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        </div>
      </div>
    </div>
  </div>

component.ts

ПРИМЕЧАНИЕ: необходимо импортировать jquery в файл ts как «объявить var $: any;»

  showresult(){
    debugger
    $('#myModal').modal('show');
  }

Изменения, которые я сделал:

• удалил "data-toggle =" modal "из тега Button (благодаря @miCRoSCoPiC_eaRthLinG этот ответ мне в этом помогает) в моем случае показ модального отображения, поэтому я создал (click) =" showresult () "

• Внутри component.ts необходимо объявить Jquery ($), а метод щелчка внутренней кнопки showresult () вызвать "$ ('# myModal'). modal ('show');"

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

statusCode: {
    410: function (request, status, error) { //custom error code

        document.getElementById('modalbody').innerHTML = error;
        $('#myErrorModal').modal('toggle')
    }
},
error: function (request, error) {

    document.getElementById('modalbody').innerHTML = error;
    $('#myErrorModal').modal('toggle')
}

Я удалил одно вхождение:

$ ( '# MyErrorModal'). Модальный ( 'переключение')

и это работало как волшебство!