Я создаю модальное окно, используя 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">
Если вы уже инициализировали модальное окно, вы можете захотеть reset параметры с помощью $('#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;" перезаписывается при создании модаля, поэтому не используйте это.
В наше время это очень легко. Просто добавьте:
data-backdrop="static" data-keyboard="false"
В вашем модальном разделителе.
Если вы хотите условно отключить функцию 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 (поведение по умолчанию), после закрытия.
В разделе "Параметры" на странице, которую вы связали, вы можете увидеть опцию backdrop. Передача этой опции со значением 'static' предотвратит закрытие модального файла.
вы также можете пройти {keyboard: false}, чтобы предотвратить закрытие модальности, нажав Esc.
Если вы открываете модальный с помощью js, используйте:
$('#myModal').modal({
backdrop: 'static',
keyboard: false
});
Если вы используете атрибуты данных, используйте:
<button data-target="#myModal" data-toggle="modal" data-backdrop="static" data-keyboard="false">
Launch modal
</button>
Вы можете установить поведение по умолчанию для модального всплывающего окна, используя следующую строку кода:
$.fn.modal.prototype.constructor.Constructor.DEFAULTS.backdrop = 'static';
Ну, это еще одно решение, которое некоторые из вас, возможно, ищут (как я был..)
Моя проблема была схожа, модальная коробка закрывалась, в то время как в iframe, который у меня был внутри, была загрузка, поэтому мне пришлось отключить модальное увольнение, пока 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.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>