Забороніть закриття модального вікна Twitter Bootstrap

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

Чи може хтось поділитися кодом jQuery для цього?

Я вважаю, ви хочете встановити значення фону на статичне . Якщо ви хочете уникнути закривання вікна під час використання Escключа, вам слід встановити інше значення.

Приклад:

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

АБО якщо ви використовуєте JavaScript:

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

Просто встановіть backdropвластивість 'static'.

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

Ви також можете встановити keyboardвластивість, falseоскільки це не дозволяє закрити модальний клавішу натисканням Escклавіші на клавіатурі.

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

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

Ви також можете включити ці атрибути до самого модального визначення:

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

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

Замініть Bootstrap "заховати" події діалогового вікна та зупиніть його поведінку за замовчуванням (для розпорядження діалоговим вікном).

Перегляньте фрагмент коду нижче:

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

       e.preventDefault();
   });

У нашому випадку це прекрасно працює.

Так, ви можете це зробити так:

<div id="myModal"  tabindex="-1" role="dialog"
     aria-labelledby="myModalLabel"
     aria-hidden="true"
     data-backdrop="static"  data-keyboard="false">

Начебто відповідь @ AymKdn, але це дозволить вам змінити параметри без повторної ініціалізації модалу.

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

Або якщо вам потрібно зробити кілька варіантів, JavaScript withтут стане в нагоді!

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

Якщо модальний режим вже відкритий, ці параметри набувають чинності лише наступного разу, коли модал відкриється.

Просто додайте ці дві речі

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

Це відключить кнопку втечі, а також клацання в будь-якому місці та приховання.

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

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

Як каже D3VELOPER, такий код вирішує його:

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

Я використовую і jquery & bootstrap, і просто removeData('modal')не працюю.

Найкраще, що я знайшов, - додати цей код до посилання

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

Якщо хтось приходить сюди з Google, намагаючись розібратися, як запобігти комусь закрити модаль, не забудьте, що вгорі праворуч від модаля також є кнопка закриття, яку потрібно видалити.

Я використовував деякі CSS, щоб приховати це:

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

Зауважте, що за допомогою "display: none;" перезаписується при створенні модалу, тому не використовуйте це.

Якщо ви хочете умовно відключити 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( поведінка за замовчуванням ).

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

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

Зробити це дуже просто сьогодні. Просто додайте:

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

У модальному розділювачі.

Ну, це ще одне рішення, яке деякі з вас, хлопці, можуть шукати (як я ..)

Моя проблема була аналогічною, модальне поле закривалося, коли завантажувався кадр, який я мав всередині, тому мені довелося вимкнути модальне відхилення, поки 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 закриватися за допомогою:

$modal.on("hide", function (e) {
    if(is_loading !== true) {
        e.preventDefault();
        return false
    }
});

Але з var is_loading це дозволить повторно закрити після завантаження iframe.

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

Для оновлення стану фону в Bootstrap 4.1.3 після модального відображення ми використовували наступний рядок із плагіна Bootstrap-Modal-Wrapper . Довідник коду репозиторію плагінів .

$("#yourModalElement").data('bs.modal')._config.backdrop = (true : "static");