Предотвратить Bootstrap модальные от исчезновения при щелчке за пределами или нажав клавишу Escape?

Question

Предотвратить Bootstrap модальные от исчезновения при щелчке за пределами или нажав клавишу Escape?

Я использую Twitter Bootstrap modal в качестве окна мастера и хотел бы запретить пользователю закрывать его при нажатии за пределами модального или при нажатии escape. Вместо этого я хочу, чтобы он был закрыт, когда пользователь нажимает кнопку Готово. Как я могу достичь этого сценария?

1013 13

html twitter-bootstrap modal-dialog

13 ответов:

Comments

Ничего не найдено.

Ehsan Zargar Ershadi · Accepted Answer · 2017-06-05 15:01:07

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

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

а если HTML:

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

CesarMiguel · Accepted Answer · 2014-01-07 18:07:12

работает, data-backdrop="static" нажать и data-keyboard="false" для Esc в вашем div модальном:
<div id="idModal" class="modal hide" data-backdrop="static" data-keyboard="false">

Ganesh Putta · Accepted Answer · 2016-07-25 10:27:16

просто добавить data-backdrop="static" и data-keyboard="false" атрибуты для этого модального.

например.
<a data-controls-modal="your_div_id" data-backdrop="static" data-keyboard="false" href="#">

tarun chotia · Accepted Answer · 2018-04-12 13:11:16

вы также можете использовать Direct в модели bootstrap.
<div class="modal fade" id="myModal" data-keyboard="false" data-backdrop="static">

Rafael Keller · Accepted Answer · 2015-08-20 00:12:05

вы можете использовать код ниже
$.fn.modal.prototype.constructor.Constructor.DEFAULTS.backdrop = 'static';
чтобы изменить поведение по умолчанию.

Selva Balaji · Accepted Answer · 2016-09-01 09:35:09

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

Arsalan Ahmed Khan · Accepted Answer · 2017-10-04 23:08:22

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

Ramesh kumar · Accepted Answer · 2016-10-26 09:14:18

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

HoangLong85 · Accepted Answer · 2016-06-04 07:56:07

Если вам нужно отключить щелчок снаружи, но включить нажатие escape
$('#myModal').modal({
    backdrop: 'static',   // This disable for click outside event
    keyboard: true        // This for keyboard event
})

Nabid · Accepted Answer · 2017-08-16 02:16:10

для меня работал следующий скрипт:

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

Marudhu Raj · Accepted Answer · 2016-07-13 09:23:47

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

shubhangi singh · Accepted Answer · 2017-01-22 09:36:07

<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>
</div>
Я думаю, что этот codepen может помочь вам предотвратить модальное закрытие css и bootstrap

youen · Accepted Answer · 2018-08-06 11:36:42

Если вам нужно настроить этот после модальное, вы можете использовать решение @Набид. Однако иногда вам все равно нужно разрешить некоторые метод для закрытия модального. Если у вас есть кнопка с классом 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, и только тогда я мог знать, нужно ли настроить модальное, чтобы предотвратить "неявное" закрытие. Вы можете использовать аналогичную конструкцию, чтобы предотвратить закрытие модального во время его загрузки.