Предотвратить исчезновение Bootstrap Modal при нажатии снаружи или нажатии escape?

Ответ 1

Если используется JavaScript, то:

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

и в HTML:

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

Ответ 2

Также работает data-backdrop="static", чтобы щелкнуть и data-keyboard="false" в Esc в вашем div-модале:

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

Ответ 3

Вы также можете использовать Direct в модели начальной загрузки.

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

Ответ 4

Просто добавьте атрибуты data-backdrop="static" и data-keyboard="false" к этому модалу.

Eg.

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

Ответ 5

Вы можете использовать код ниже

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

чтобы изменить поведение по умолчанию.

Ответ 6

Я использую эти атрибуты, и он работает, data-keyboard="false" data-backdrop="static"

Ответ 7

jQuery('#modal_ajax').modal('show', {backdrop: 'static', keyboard: false});

Ответ 8

<button class="btn btn-primary btn-lg" data-backdrop="static" data-keyboard="false" data-target="#myModal" data-toggle="modal">

Ответ 9

Этот код не позволит модалу закрыться, если вы нажмете вне модального окна.

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

Ответ 10

<button class='btn btn-danger fa fa-trash' data-toggle='modal' data-target='#deleteModal' data-backdrop='static' data-keyboard='false'></button>

просто добавьте атрибут data-background и data-keyboard к кнопке, на которой модель открыта.

Ответ 11

Если вам нужно отключить нажатие на внешнюю сторону, но разрешить нажатие кнопки

$('#myModal').modal({
    backdrop: 'static',   // This disable for click outside event
    keyboard: true        // This for keyboard event
})

Ответ 12

Для меня работала следующая script:

// prevent event when the modal is about to hide
$('#myModal').on('hide.bs.modal', function (e) {
    e.preventDefault();
    e.stopPropagation();
    return false;
});

Ответ 13

Ваш код работает, когда я выхожу на сторону модального, но если я использую html input поле внутри модального тела, тогда наведите курсор на этот ввод, затем нажмите esc ключ модальный закрыт. Нажмите здесь

Ответ 14

Вы должны использовать фон статический, клавиатура ложная. и может использовать кнопку закрытия с помощью jQuery или может удалить из модального HTML. Надеюсь, это поможет.

 $('#MyModal').modal({ backdrop: 'static', keyboard: false });
    $('#MyModal .close').css('display','none');

Ответ 15

<div class="modal show">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">     

    <h4 class="modal-title">Modal title</h4>
     </div>
     <div class="modal-body">
      <p>One fine body&hellip;</p>
  </div>

  </div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->

Я думаю, что этот codepen может вам помочь предотвратить использование модального закрытия css и bootstrap

Ответ 16

Если вам нужно настроить это после показа модального окна, вы можете использовать решение @Nabid. Однако иногда вам все же нужно разрешить какой-либо метод закрыть модальный режим. Предполагая, что у вас есть кнопка с классом really-close-the-modal, которая должна действительно закрыть модальное окно, вы можете использовать этот код (jquery):

var closeButtonClicked = false;

$('.really-close-the-modal').on('click', function () {
    closeButtonClicked = true;
});

$('#myModal').on('hide.bs.modal', function (e) {
    if (!closeButtonClicked) {
        e.preventDefault();
        e.stopPropagation();
        return false;
    }
    closeButtonClicked = false;
});

Это не очень хороший дизайн кода, но он помог мне в ситуации, когда модал показывался с анимацией загрузчика, пока не вернулся запрос ajax, и только тогда я смог узнать, нужно ли сконфигурировать модал для предотвращения "неявного" закрытие. Вы можете использовать аналогичную конструкцию, чтобы предотвратить закрытие модального окна во время его загрузки.