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

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

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

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

Пример:

<a data-controls-modal="your_div_id"
   data-backdrop="static"
   data-keyboard="false"
   href="#">

ИЛИ, если вы используете JavaScript:

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

Просто установите 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 «скрыть» диалога и остановите его поведение по умолчанию (чтобы избавиться от диалога).

Пожалуйста, посмотрите фрагмент кода ниже:

   $('#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">

Это отключит кнопку выхода, а также щелчок в любом месте и скрыть.

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

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

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

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

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

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

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

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

Представленные здесь решения не работали на 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.

<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");