it-swarm.com.ru

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

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

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

520
user1296175

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

Пример:

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

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

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

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

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

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

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

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

309
Nirmal

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

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

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

46
AymKdn

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

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

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

       e.preventDefault();
   });

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

33
Sam Jha

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

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

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

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

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

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

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

22
Chris Barr

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

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

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

12
Vivek

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

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

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

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

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

6
Morgan RotaStabelli

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

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

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

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

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

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

2
Drew

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

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

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

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

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

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

2
jfindley
<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
shiva krishna

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

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

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

1
miguelmpn

Чтобы обновить состояние фона в Bootstrap 4.1.3 после того, как модальное значение было отображено, мы использовали следующую строку из Bootstrap-Modal-Wrapper plugin. Ссылка на код репозитория плагина .

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