Подтвердить что ты не робот

Bootstrap Modal сразу исчезает

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

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

Код кнопки:

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

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

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

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

4b9b3361

ОТВЕТЫ

Ответ 1

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

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

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

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

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

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

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

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

Plunker

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

Ответ 2

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

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

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

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

Ответ 3

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

data-toggle="modal"

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

Ответ 4

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

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

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

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

Ответ 5

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

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

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

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

Ответ 6

e.preventDefault(); с jquery ui

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

Ответ 7

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

Ответ 8

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

Ответ 9

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

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

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

Ответ 10

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

Ответ 11

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

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

Ответ 12

У меня тоже была такая же проблема, но для меня это происходило, потому что у меня была кнопка с типом "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.'/>

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

Ответ 13

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

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

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

Ответ 14

В моем случае я использовал кнопку 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>

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

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

Ответ 15

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

Ответ 16

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

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

Ответ 17

Еще одна причина/решение! Я имел в своем коде 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 является избыточным, и после удаления он работает.

Ответ 18

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

Ответ 19

В моем случае у меня был 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>-->

Ответ 20

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

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

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

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

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

Ответ 21

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

Ответ 22

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

Ответ 23

в случае, если кто-то использует 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'

Ответ 24

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

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

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

Ответ 25

во время работы с 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');"

Ответ 26

Вы пытались удалить

data-dismiss="modal"

Ответ 27

В моем случае нет проблемы с модальной загрузкой дважды. Когда я включаю type="button" в тег кнопки. Проблема решена. Я не знал почему. Это все еще не работает для меня на теге/элементах управления asp.net.