it-swarm.com.ru

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

Я пытаюсь заставить работать простой модальный пример начальной загрузки, я следую этому документу , который гласит: «Вы можете легко активировать модалы на своей странице, не записывая ни одной строки javascript. Просто присвойте элементу элементы управления данными. -модальный атрибут, который соответствует модальному идентификатору элемента, ... ", но я сделал все, что мог, и провел огромное количество исследований, все еще не могу заставить этот простой модал работать.

<div class="modal" id="myModal">
<div class="modal-header">
<button class="close" data-dismiss="modal">×</button>
<h3>Modal header</h3>
</div>
<div class="modal-body">
<p>One fine body…</p>
</div>
<div class="modal-footer">
<a href="#" class="btn">Close</a>
<a href="#" class="btn btn-primary">Save changes</a>
</div>
</div>

У меня есть либо это:

<a class="btn" data-controls-modal="myModal">Launch Modal</a>

или это: 

<a class="btn" data-toggle="modal" href="#myModal" >Launch Modal</a>

кнопка для активации модального я также загрузил на странице bootstrap-modal.js. Если я не добавил строку javascript для обработки события нажатия «Launch Modal», когда я нажимаю «Launch Modal», ничего не происходит вообще, есть что-то, что я пропустил?

27
cnherald

Я наконец нашел это решение от "Свена" и решил проблему. то, что я сделал, я включил "bootstrap.min.js" с:

<script src="bootstrap.min.js"/>

вместо:

<script src="bootstrap.min.js"></script>

и это решило проблему, которая выглядела действительно странно. кто-нибудь может объяснить почему?

23
cnherald

Fiddle 1: копия модального образа, используемого на сайте начальной загрузки Twitter. (Это модал, который не отображается по умолчанию, но запускается, когда Вы нажимаете кнопку демонстрации.) 

http://jsfiddle.net/9RcDN/


Fiddle 2: копия модального окна, описанного в документации по начальной загрузке, , Но включающая необходимые элементы, чтобы избежать использования любого javascript . Обратите внимание, особенно на включение класса hide на #myModal div, и использование data-dismiss="modal" на кнопке Close. 

http://jsfiddle.net/aPDVM/4/

<a class="btn" data-toggle="modal" href="#myModal">Launch Modal</a>


<div class="modal hide" id="myModal"><!-- note the use of "hide" class -->
  <div class="modal-header">
    <button class="close" data-dismiss="modal">×</button>
    <h3>Modal header</h3>
  </div>
  <div class="modal-body">
    <p>One fine body…</p>
  </div>
  <div class="modal-footer">
    <a href="#" class="btn" data-dismiss="modal">Close</a><!-- note the use of "data-dismiss" -->
    <a href="#" class="btn btn-primary">Save changes</a>
  </div>
</div>​

Стоит также отметить, что используемый вами сайт работает на начальной загрузке 2.0, В то время как официальный сайт начальной загрузки Twitter находится на версии 2.0.3.

24
mg1075

Также взгляните на BootBox, действительно просто показывать предупреждения и подтверждать окна в модале начальной загрузки. http://bootboxjs.com/

Реализация так же просто, как это:

Нормальное оповещение:

bootbox.alert("Hello world!");

Подтверждение:

bootbox.confirm("Are you sure?", function(result) {
  Example.show("Confirm result: "+result);
}); 

Promt:

bootbox.Prompt("What is your name?", function(result) {                
      if (result === null) {                                             
        Example.show("Prompt dismissed");                              
      } else {
        Example.show("Hi <b>"+result+"</b>");                          
      }
});

И даже на заказ:

    bootbox.dialog("I am a custom dialog", [{
    "label" : "Success!",
    "class" : "btn-success",
    "callback": function() {
        Example.show("great success");
    }
}, {
    "label" : "Danger!",
    "class" : "btn-danger",
    "callback": function() {
        Example.show("uh oh, look out!");
    }
}, {
    "label" : "Click ME!",
    "class" : "btn-primary",
    "callback": function() {
        Example.show("Primary button");
    }
}, {
    "label" : "Just a button..."
}]);
17
Nick N.

У меня тоже была проблема с модалами. Я должен был объявитьjquery.min.jsbeforebootstrap.min.js(на моей странице макета). С официального сайта: «все плагины зависят от jQuery (это означает, что jQuery должен быть включен перед файлами плагинов)"

10
Anton Petrovskyi

Я тоже столкнулся с этой проблемой. Я включил bootstrap.js И bootstrap-modal.js . Если у вас уже есть bootstrap.js, вам не нужно включать popover.

5
Tulio F.

Для меня модал бутстрапа показывался и исчезал, когда я нажимал на тег кнопки (в разметке модал отображается и скрывается с использованием только атрибутов данных). В моем gulpfile.js я добавил bootstrap.js (который имел модальную логику) и файл modal.js. Поэтому я думаю, что после того, как браузер проанализирует и выполнит оба файла, к определенному элементу dom будут прикреплены два обработчика события щелчка (один для каждого из файлов), поэтому один показывает модал, а другой скрывает модал. Надеюсь, это кому-нибудь поможет.

1
agent47

Также,

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

  1. То, что вы также получили пакет Bootsrap Modal Dialog (очень важно)
  2. Вы добавили его в bundle.config, если используете пакетирование.
0
John Swaringen

Лучшее решение - загрузить искривленную версию bootstrap.js без jquery. Получить его из http://daniemon.com/blog/bootstrap-without-jquery/

<script src=".../bootstrap-without-jquery.min.js"></script>

Этот путь избавит вас от проблем с тегами скрипта. 

0
Long

У меня была такая же проблема при использовании Angular CLI. Мне нужно было импортировать файл bootstrap.js.min в файл .angular-cli.json :

  "scripts": ["../node_modules/jquery/dist/jquery.min.js",
              "../node_modules/bootstrap/dist/js/bootstrap.min.js"],
0
Flea

Попробуйте пропустить тег p или заменить его тегом h3 или аналогичным. Заменить:

<p>One fine body…</p>

с

<h3>One fine body…</h3>

Это сработало для меня, я не знаю почему, но кажется, что тег p как-то не полностью совместим с некоторыми версиями Bootstrap.

0
Daniel