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

471

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

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

  • 1
    У вас может быть совершенно веская причина для этого (и, вероятно, есть много других). Тем не менее, стоит отметить, что в целом соображения UX будут этому препятствовать - большинство пользователей ожидают, что щелчок по модалу приведет к выводу контента «ниже» на «передний план».
  • 31
    @Trevor Это как противоположность модальной .
Показать ещё 2 комментария
Теги:
modal-dialog
mouseclick-event

18 ответов

668
Лучший ответ

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

Пример:

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

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

$('#myModal').modal({
  backdrop: 'static',
  keyboard: false
});
  • 6
    @ user1296175 Каким был ваш окончательный код для достижения этой цели? Я хочу сделать то же самое.
  • 4
    Спасибо @nobita, добавь data-background = "static" делает свое дело! Документ начальной загрузки Twitter плохой :(
Показать ещё 8 комментариев
303

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

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

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

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

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

  • 6
    Да, это самый чистый, самый простой ответ (так как он избегает добавления атрибутов данных). Для справки, backdrop и keyboard упомянуты здесь в документации в разделе « Опции ».
  • 0
    Следует ли избегать атрибутов данных? Пожалуйста, руководство по этому вопросу.
Показать ещё 2 комментария
213

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

<div class="modal hide fade" data-keyboard="false" data-backdrop="static">
  • 4
    Да, это самый чистый и простой ответ (поскольку он работает путем добавления атрибутов данных). Для справки, фон и клавиатура упомянуты здесь в документации в разделе «Опции».
  • 0
    Если вы запускаете модальный режим при загрузке страницы, это лучший способ удалить другие параметры закрытия.
46

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

  • 1
    Это помогло мне. После установки «фон: статический» пользователь все еще может закрыть модал одним щелчком мыши; казалось, ошибка, но это сделал свое дело!
  • 5
    На данный момент: $ ('# modal'). RemoveData ('bs.modal'). Modal ({фон: 'статический', клавиатура: ложь});
31

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

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

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

       e.preventDefault();
   });

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

  • 2
    тогда как его вернуть?
  • 3
    Просто элегантно. thx :) И @sertaconay просто создайте логическую переменную (например), которая будет проверена, чтобы решить, хотите ли вы запретить использование по умолчанию
Показать ещё 2 комментария
27

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

<div id="myModal"  tabindex="-1" role="dialog"
     aria-labelledby="myModalLabel"
     aria-hidden="true"
     data-backdrop="static"  data-keyboard="false">
  • 0
    Это идеально подходит для случая, когда модал объявлен в html, и открывается только через javascript - т.е. нет ссылки на него. Спасибо!
23

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

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

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

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

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

11

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

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

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

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

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

6

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

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

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

4

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

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

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

 $.fn.modal.prototype.constructor.Constructor.DEFAULTS.backdrop = 'static';
  • 0
    как +1 этот метод, я не хочу эту опцию для всех модальных.
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

Если вы хотите условно отключить функцию 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

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

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

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

2

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

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

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

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

  • 0
    Разве вы не можете просто удалить кнопку из модального заголовка?
  • 0
    Иногда выгодно использовать CSS вместо изменения HTML.
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

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

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

Ещё вопросы

Сообщество Overcoder
Наверх
Меню