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

просто установить backdrop свойство 'static'.

$('#myModal').modal({
  backdrop: 'static',
  keyboard: true
})

вы также можете установить keyboard свойство false потому что это предотвращает модальное от закрытия нажатием кнопки Esc клавишу на клавиатуре.

$('#myModal').modal({
  backdrop: 'static',
  keyboard: false
})

myModal - это идентификатор div, который содержит ваш модальный контент.

вы также можете включить эти атрибуты в само модальное определение:

<div class="modal hide fade" data-keyboard="false" data-backdrop="static">

Если вы уже инициализировали модальное окно, то вы можете сбросить параметры с помощью $('#myModal').removeData("modal").modal({backdrop: 'static', keyboard: false}) чтобы убедиться, что он будет применять новые варианты.

переопределите событие Bootstrap 'hide' диалогового окна и остановите его поведение по умолчанию (чтобы удалить диалоговое окно).

пожалуйста, см. ниже код:

   $('#yourDialogID').on('hide.bs.modal', function(e) {

       e.preventDefault();
   });

это работает в нашем случае.

Да, вы можете сделать это так:

<div id="myModal"  tabindex="-1" role="dialog"
     aria-labelledby="myModalLabel"
     aria-hidden="true"
     data-backdrop="static"  data-keyboard="false">

вроде как ответ @AymKdn,но это позволит вам изменить параметры без повторной инициализации модального.

$('#myModal').data('modal').options.keyboard = false;

или если вам нужно сделать несколько вариантов, JavaScript with пригодится здесь!

with ($('#myModal').data("modal").options) {
    backdrop = 'static';
    keyboard = false;
}

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

просто добавьте эти две вещи

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

теперь это будет выглядеть так

<div class="modal fade bs-example-modal-sm" id="myModal" data-backdrop="static" data-keyboard="false" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">

он отключит кнопку escape, а также Нажмите в любом месте и скрыть.

вы можете отключить фоновое поведение click-to-close и сделать это по умолчанию для всех ваших модалов, добавив этот JavaScript на свою страницу (убедитесь, что он выполняется после загрузки jQuery и Bootstrap JS):

$(function() {
    $.fn.modal.Constructor.DEFAULTS.backdrop = 'static';
});

Как говорит D3VELOPER, следующий код разрешает его:

$('#modal').removeData('bs.modal').modal({backdrop: 'static', keyboard: false});

Я использую как jquery & bootstrap, так и просто removeData('modal') не работают.

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

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

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

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

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

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

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

Bootstrap v3.xx

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

Bootstrap v2.xx

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

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

вы можете установить поведение по умолчанию модальное всплывающее окно с помощью ниже код:

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

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

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

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

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

моя проблема была аналогичной, модальное поле закрывалось, пока 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
    }
});

но это var is_loading, который снова включит закрытие после загрузки Iframe.

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

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

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