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

Ответ 1

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

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

вместо:

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

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

Ответ 2

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

http://jsfiddle.net/9RcDN/

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

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

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

Ответ 3

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

Реализация выполняется так же просто:

Нормальное предупреждение:

bootbox.alert("Hello world!");

Confirm:

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..."
}]);

Ответ 4

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

Ответ 5

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

Ответ 6

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

Ответ 7

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

<p>One fine body…</p>

с

<h3>One fine body…</h3>

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

Ответ 8

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

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

Таким образом, вы избавитесь от проблем с тегами script.

Ответ 9

Кроме того,

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

• Что вы также получили пакет Bootsrap Modal Dialog (очень важный)
• Вы добавили его в пакет bund.config, если используете пакет.

Ответ 10

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

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

Ответ 11

Простым способом использования модалов является eModal!

Ex из github:

• Ссылка на eModal.js <script src="//rawgit.com/saribe/eModal/master/dist/eModal.min.js"></script>

• использовать eModal для отображения модального для предупреждения, ajax, запроса или подтверждения

  // Display an alert modal with default title (Attention)
  eModal.alert('You shall not pass!');
  

Ответ 12

Вы должны вызвать плагин Bootstrap jQuery, чтобы он срабатывал.

Ответ 13

<div class="modal fade bs-example-modal-lg" id="{{'modal'+ cartModal.index}}">
  <div class="modal-dialog modal-lg" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal"  aria-label="Close"><span aria-hidden="true">&times;</span></button>
      </div>
      <div class="modal-body">
          <div class="col-lg-6" >
            <p class="prodTitle" ng-bind="(cartModal.product.p_name|uppercase)"></p>
            <p class="price-para">
              <span class="currency-cls" ng-bind="cartModal.product.c_currency"></span>
              <span class="price-cls" ng-bind="cartModal.product.p_price"></span>
            </p>
            <p class="select-color">
              <span ng-repeat="color in cartModal.product.p_available_options.colors">
                <button id="color-style" ng-click="cartModal.saveColor(color)" ng-style="{'background-color':color.hexcode}"></button>
              </span>
            </p>
            <br>
            <p class="select-box">
              <span class="size-select-cls">
                SIZE:<select ng-init="items=cartModal.product.p_available_options.sizes" ng-model="cartModal.selectedSize" ng-options="item.code as
                item.name for item in items"></select>
              </span>
              <span class="qty">
                QTY:<input type="number"  min="1" ng-model="cartModal.selectedQty"/>
              </span>
            </p>
            <p class="edit-button">
              <button class="btn-primary btn-lg" data-dismiss="modal" ng-click="cartModal.save();cartModal.calculate()">EDIT</button>
            </p>
          </div>
          <div class="col-lg-6">
            <img ng-src="{{cartModal.product.imageSrc}}">
          </div>
      </div>
    </div>
  </div>
</div>