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

549

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

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

user1296175
источник
1
У вас может быть совершенно веская причина для этого (и, вероятно, есть много других). Тем не менее, стоит отметить, что в целом соображения по UX будут этому препятствовать - большинство пользователей ожидают, что щелчок по модалу приведет к выводу контента «ниже» на «передний план».
Тревор
32
@Trevor Это как противоположность модальной .
Роулинг
11
Что делать, если есть фоновая страница, которая может быть активирована только при первом входе пользователя в систему. При нажатии на модальную кнопку Ok пользователь будет перенаправлен на страницу входа. Если пользователь может просто щелкнуть, это означает, что пользователь пропускает страницу входа и просто получает доступ к странице без входа в систему. All Hell Break Loose
перемычка рбк
5
@Trevor Я не вижу никаких доказательств в поддержку вашего заявления.
1252748
Эта функция имеет смысл в сценарии, когда пользователь должен заполнить много полей формы в модальном режиме. Если пользователь случайно щелкнет за пределами модального режима, все введенные данные будут потеряны; тогда им придется заново активировать модальные поля и заполнить поля. Эта особенность позволит избежать такого раздражения.
Mickmackusa

Ответы:

692

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

Пример:

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

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

$('#myModal').modal({
  backdrop: 'static',
  keyboard: false
});
Nobita
источник
7
@ user1296175 Каким был твой окончательный код для достижения этой цели? Я хочу сделать то же самое.
AlphaMale
4
Спасибо @nobita, добавь data-background = "static" делает свое дело! Документ начальной загрузки в Твиттере плохой :(
Blue Smith
2
Проверьте ответ от @@ Varun Chatterji и включите его в свое модальное определение
Леандро
1
отключить внешний клик для всех модальных линий одной строкой js: $ .fn.modal.Constructor.DEFAULTS.backdrop = 'static';
Лукас Лиезис
1
Для пользователей Angular: var modalInstance = $ modal.open ({templateUrl: 'modalTemplate.html', контроллер: 'modalController', фон: 'статический',});
Александр
310

Просто установите backdropсвойство в 'static'.

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

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

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

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

Нирмал
источник
6
Да, это самый чистый, самый простой ответ (так как он избегает добавления атрибутов данных). Для справки, backdropи keyboardупомянуты здесь в их документации в разделе параметров .
Джесси Дюпюи
Следует ли избегать атрибутов данных? Пожалуйста, руководство по этому вопросу.
@GopalAggarwal: Зависит от того, как вы настраиваете модал. Если вы связываете модальное с несколькими тегами привязки, то использование атрибутов данных может иметь смысл. Но когда есть только один модальный за тег, я бы пошел с параметрами скрипта, где каждое поведение видно в одном месте.
Нирмал
7
Также, чтобы избежать модального отображения, немедленно перейдите в шоу: false
ClearCloud8
214

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

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

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

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

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

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

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

       e.preventDefault();
   });

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

Сэм Джа
источник
2
тогда как его вернуть?
sertaconay
3
Просто элегантно. thx :) И @sertaconay просто создайте логическую переменную (например), которая будет проверена, чтобы решить, хотите ли вы предотвратить дефолт
Нимрод Йонатан Бен-Нес
1
единственный вариант здесь, который работал после того, как
модал
2
Это идеальное решение, если вы хотите лучше контролировать, когда модальные окна закрыты, а когда нет.
Curos
33

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

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

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

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

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

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

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

CBarr
источник
stackoverflow.com/questions/16030448/… Но мне не нравится это решение, хотя
Виктор
14

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

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

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

Вивек
источник
Этот совет был предоставлен годами ранее.
mickmackusa
11

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

$(function() {
    $.fn.modal.Constructor.DEFAULTS.backdrop = 'static';
});
Эрик Б
источник
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>
user3634719
источник
2

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

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

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

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

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

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

 $.fn.modal.prototype.constructor.Constructor.DEFAULTS.backdrop = 'static';
хереш ханат
источник
как +1 этот метод, я не хочу эту опцию для всех модальных.
Цохр
2

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

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

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

jfindley
источник
Этот совет был предоставлен годами ранее на этой же странице.
mickmackusa
1

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

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

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

miguelmpn
источник
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>
Шива Кришна
источник