Запретить закрытие модального окна Twitter Bootstrap

Question

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

Может ли кто-нибудь поделиться кодом jQuery, чтобы сделать это?

Answer 1

Лучшее, что я нашел, это добавить этот код по ссылке

<!-- Link -->
<a href="#mdl" role="button"  data-backdrop="static" data-keyboard="false" data-toggle="modal" id_team="" ></a>
<-- Div -->
<div id="mdl" class="modal hide fade" tabindex="-1" role="dialog" data-keyboard="false" data-backdrop="static"></div>

Answer 2

Вы можете установить поведение модального всплывающего окна по умолчанию, используя следующую строку кода:

 $.fn.modal.prototype.constructor.Constructor.DEFAULTS.backdrop = 'static';

Answer 3

Если вы хотите условно отключить функцию backdrop click closing. Вы можете использовать следующую строку для установки опции backdrop на static во время выполнения.

Bootstrap v3.xx

jQuery('#MyModal').data('bs.modal').options.backdrop = 'static';

Bootstrap v2.xx

jQuery('#MyModal').data('modal').options.backdrop = 'static';

Это предотвратит закрытие уже созданной модели с параметром backdrop, установленным на false ( поведение по умолчанию ).

Answer 4

В наше время это очень легко. Просто добавьте:

data-backdrop="static" data-keyboard="false" 

В вашем модальном делителе.

Answer 5

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

Я использовал CSS, чтобы скрыть это:

#Modal .modal-header button.close {
    visibility: hidden;
}

Обратите внимание, что при использовании "display: none;" перезаписывается при создании модала, поэтому не используйте его.

Answer 6

<button type="button" class="btn btn-info btn-md" id="myBtn3">Static 
Modal</button>

<!-- Modal -->
<div class="modal fade" id="myModal3" role="dialog">
<div class="modal-dialog">
  <!-- Modal content-->
  <div class="modal-content">
    <div class="modal-header">
      <button type="button" class="close" data-dismiss="modal">×</button>
      <h4 class="modal-title">Static Backdrop</h4>
    </div>
    <div class="modal-body">
      <p>You cannot click outside of this modal to close it.</p>
    </div>
    <div class="modal-footer">
      <button type="button" class="btn btn-default" data-
      dismiss="modal">Close</button>
    </div>
   </div>
  </div>
</div>
   <script>
    $("#myBtn3").click(function(){
     $("#myModal3").modal({backdrop: "static"});
    });
   });
  </script>

Answer 7

Ну, это еще одно решение, которое некоторые из вас, ребята, могут искать (как я был ..)

Моя проблема была похожей: модальное окно закрывалось во время загрузки iframe, поэтому я должен был отключить модальное закрытие, пока не завершится загрузка Iframe, а затем снова включить.

Представленные здесь решения не работали на 100%.

Мое решение было таким:

showLocationModal = function(loc){

    var is_loading = true;

    if(is_loading === true) {

        is_loading  = false;
        var $modal   = $('#locationModal');

        $modal.modal({show:true});

        // prevent Modal to close before the iframe is loaded
        $modal.on("hide", function (e) {
            if(is_loading !== true) {
                e.preventDefault();
                return false
            }
        });

        // populate Modal
        $modal.find('.modal-body iframe').hide().attr('src', location.link).load(function(){

            is_loading = true;
     });
}};

Поэтому я временно запрещаю закрытие модала с помощью:

$modal.on("hide", function (e) {
    if(is_loading !== true) {
        e.preventDefault();
        return false
    }
});

Но с помощью переменной is_loading, которая снова разрешит закрытие после загрузки Iframe.

Answer 8

Чтобы обновить состояние фона в Bootstrap 4.1.3 после того, как модальное значение было отображено, мы использовали следующую строку из плагина Bootstrap-Modal-Wrapper . Ссылка на код репозитория плагина .

$("#yourModalElement").data('bs.modal')._config.backdrop = (true : "static");