Я делаю сайт начальной загрузки с несколькими модулями Bootstrap. Я пытаюсь настроить некоторые функции по умолчанию.
Проблема в этом; Вы можете закрыть модальный, щелкнув по фону. Есть ли способ отключить эту функцию? Только для определенных модалов?
В главе "Опции" на странице, которую вы связали, вы можете увидеть опцию backdrop. Передача этой опции со значением 'static' предотвратит закрытие модального файла.
Поскольку @PedroVagner указал на комментарии, вы также можете пройти {keyboard: false}, чтобы предотвратить закрытие модальности, нажав Esc.
Если вы открываете модальный с помощью js, используйте:
$('#myModal').modal({backdrop: 'static', keyboard: false})
Если вы используете атрибуты данных, используйте:
<button data-target="#myModal" data-toggle="modal" data-backdrop="static" data-keyboard="false">
Launch demo modal
</button>`
Это самый простой
Вы можете определить свое модальное поведение, определяя клавиатуру данных и базу данных.
<div id="modal" class="modal hide fade in" data-keyboard="false" data-backdrop="static">
Вы можете использовать такой атрибут: data-backdrop="static" или с javascript:
$('#myModal').modal({
backdrop: 'static',
keyboard: false // to prevent closing with Esc button (if you want this too)
})
См. также этот ответ: Запретить закрытие модального окна twitter bootstrap
В моем приложении я использую следующий фрагмент кода, чтобы показать Bootstrap modal через jQuery.
$('#myModall').modal({
backdrop: 'static',
keyboard: true,
show: true
});
Вы можете использовать
$.fn.modal.prototype.constructor.Constructor.DEFAULTS.backdrop = 'static';
$.fn.modal.prototype.constructor.Constructor.DEFAULTS.keyboard = false;
чтобы изменить поведение по умолчанию.
Существует два способа отключить клик за пределами области загрузки bootstrap, чтобы закрыть модальный -
с помощью javascript
$('#myModal').modal({
backdrop: 'static',
keyboard: false
});
с использованием атрибута данных в теге HTML
data-backdrop="static" data-keyboard="false" //write this attributes in that button where you click to open the modal popup.
Checkout This::
$(document).ready(function() {
$("#popup").modal({
show: false,
backdrop: 'static'
});
$("#click-me").click(function() {
$("#popup").modal("show");
});
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.1/css/bootstrap.css" rel="stylesheet"/>
<script src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.1/js/bootstrap.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.1.0/css/bootstrap-combined.min.css" rel="stylesheet">
</head>
<body>
<div class="modal" id="popup" style="display: none;">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3>Standard Selectpickers</h3>
</div>
<div class="modal-body">
<select class="selectpicker" data-container="body">
<option>Mustard</option>
<option>Ketchup</option>
<option>Relish</option>
</select>
</div>
<div class="modal-footer">
<button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
<button class="btn btn-primary">Save changes</button>
</div>
</div>
<a id="click-me" class="btn btn-primary">Click Me</a>
</body>
<script type="text/javascript" src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.1.0/js/bootstrap.min.js"></script>
</html>Другой вариант, если вы не знаете, был ли модальный режим уже открыт или нет, и вам нужно настроить модальные параметры:
Bootstrap 3.4
var $modal = $('#modal');
var keyboard = false; // Prevent to close by ESC
var backdrop = 'static'; // Prevent to close on click outside the modal
if(typeof $modal.data('bs.modal') === 'undefined') { // Modal did not open yet
$modal.modal({
keyboard: keyboard,
backdrop: backdrop
});
} else { // Modal has already been opened
$modal.data('bs.modal').options.keyboard = keyboard;
$modal.data('bs.modal').options.backdrop = backdrop;
if(keyboard === false) {
$modal.off('keydown.dismiss.bs.modal'); // Disable ESC
} else { //
$modal.data('bs.modal').escape(); // Resets ESC
}
}
Бутстрап 4. 3+
var $modal = $('#modal');
var keyboard = false; // Prevent to close by ESC
var backdrop = 'static'; // Prevent to close on click outside the modal
if(typeof $modal.data('bs.modal') === 'undefined') { // Modal did not open yet
$modal.modal({
keyboard: keyboard,
backdrop: backdrop
});
} else { // Modal has already been opened
$modal.data('bs.modal')._config.keyboard = keyboard;
$modal.data('bs.modal')._config.backdrop = backdrop;
if(keyboard === false) {
$modal.off('keydown.dismiss.bs.modal'); // Disable ESC
} else { //
$modal.data('bs.modal').escape(); // Resets ESC
}
}
Измените параметры на _config
Решение, которое работает для меня, следующее:
$('#myModal').modal({backdrop: 'static', keyboard: false})
backdrop: отключено внешнее событие click
keyboard: отключено событие ключевого слова scape
Попробуй это:
<div
class="modal fade"
id="customer_bill_gen"
data-keyboard="false"
data-backdrop="static"
>
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" data-keyboard="false" data-backdrop="static">
попробуйте это, во время разработки моего приложения... Я также столкнулся с проблемой, что значения по умолчанию для атрибута модели => data-keyboard = "true", => data-background = "не статично" Надеюсь, что это поможет вам
Для меня возникла путаница между модальным модулем bootstrap и jQuery. Это сделало трюк (для модального jQuery)
$("#sticky").modal({
escapeClose: false,
clickClose: false,
showClose: false
});
backdrop: 'static'
https://getbootstrap.com/docs/3.3/javascript/#modals-options
укажите
staticфон, который не закрывает модальное окно при нажатии.
You can Disallow closing of #signUp (This should be the id of the modal) modal when clicking outside of modal.
As well as on ESC button.
jQuery('#signUp').on('shown.bs.modal', function() {
jQuery(this).data('bs.modal').options.backdrop = 'static';// For outside click of modal.
jQuery(this).data('bs.modal').options.keyboard = false;// For ESC button.
})
ни одно из этих решений не помогло мне.
У меня есть модальные условия и положения, которые я хотел заставить людей просмотреть, прежде чем продолжить... значения по умолчанию "статический" и "клавиатура" в соответствии с параметрами сделали невозможным прокрутить страницу вниз, так как условия и положения - это несколько страниц log, static не был ответом для меня.
Так что вместо этого я пошел, чтобы отменить привязку метода клика на модале, со следующим я смог получить желаемый эффект.
$('.modal').off('click');
Вы также можете сделать это, не используя JQuery, например:
<div id="myModal">
var modal = document.getElementById('myModal');
modal.backdrop = "static";
modal.keyboard = false;
Добавьте ниже css, как вы хотите ширину экрана.
@media (min-width: 991px){
.modal-dialog {
margin: 0px 179px !important;
}
}