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

Question

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

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

Answer 1

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

Пример:

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

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

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

Answer 2

Просто установите для свойства backdrop значение 'static'.

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

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

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

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

Answer 3

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

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

Answer 4

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

Answer 5

Переопределите событие «Скрыть» Bootstrap «Диалог» и остановите его поведение по умолчанию (чтобы избавиться от диалога).

См. Фрагмент кода ниже:

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

       e.preventDefault();
   });

В нашем случае работает нормально.

Answer 6

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

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

Answer 7

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

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

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

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

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

Answer 8

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

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

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

Answer 9

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

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

Answer 10

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

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

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