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

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

Может ли кто-то использовать код jQuery для этого?

+495
источник поделиться
18 ответов

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

Пример:

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

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

$('#myModal').modal({
  backdrop: 'static',
  keyboard: false
});
+637
источник

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

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

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

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

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

+303
источник
другие ответы

Связанные вопросы


Похожие вопросы

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

<div class="modal hide fade" data-keyboard="false" data-backdrop="static">
+203
источник

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

+46
источник

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

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

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

       e.preventDefault();
   });

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

+30
источник

Да, вы можете сделать это следующим образом:

<div id="myModal"  tabindex="-1" role="dialog"
     aria-labelledby="myModalLabel"
     aria-hidden="true"
     data-backdrop="static"  data-keyboard="false">
+26
источник

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

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

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

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

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

+22
источник

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

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

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

+11
источник

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

$(function() {
    $.fn.modal.Constructor.DEFAULTS.backdrop = 'static';
});
+11
источник

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

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

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

+6
источник

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

<!-- 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>
+4
источник

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

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

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

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

+2
источник

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

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

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

+2
источник

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

+2
источник

В разделе "Параметры" на странице, которую вы связали, вы можете увидеть опцию backdrop. Передача этой опции со значением 'static' предотвратит закрытие модального файла.
вы также можете пройти {keyboard: false}, чтобы предотвратить закрытие модальности, нажав Esc.

Если вы открываете модальный с помощью js, используйте:

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

Если вы используете атрибуты данных, используйте:

 <button data-target="#myModal" data-toggle="modal" data-backdrop="static" data-keyboard="false">
    Launch modal
 </button>
+2
источник

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

 $.fn.modal.prototype.constructor.Constructor.DEFAULTS.backdrop = 'static';
+2
источник

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

Моя проблема была схожа, модальная коробка закрывалась, в то время как в 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.

+1
источник
<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>
+1
источник

Посмотрите другие вопросы по меткам или Задайте вопрос