Запретить 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, а также Нажмите в любом месте и скрыть.

вы можете отключить поведение щелчка по закрытию фона и сделать это по умолчанию для всех ваших модалов, добавив этот 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';

Бутстрап версии 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");