Egg*_*ead 393 javascript css modal-dialog twitter-bootstrap
我正在制作一个引导程序网站,有几个Bootstrap'Modals'.我正在尝试自定义一些默认功能.
问题是这个; 您可以通过单击背景关闭模态.无论如何禁用此功能？仅限于特定模态？
Dog*_*ita 819
在选项章节中,在您链接的页面中,您可以看到该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>`
Sus*_*han 112
这是最简单的一个
您可以定义模态行为,定义数据键盘和数据背景.
<div id="modal" class="modal hide fade in" data-keyboard="false" data-backdrop="static">
Ant*_*dis 99
您可以使用以下属性:data-backdrop="static"或使用javascript:
$('#myModal').modal({
backdrop: 'static',
keyboard: false // to prevent closing with Esc button (if you want this too)
})
也请看这个答案:禁止关闭twitter bootstrap模态窗口
小智 33
将此代码放入模态 html 的第一个块中
引导程序 4.x
data-keyboard="false" data-backdrop="static"
升压器 5.x
data-bs-keyboard="false" data-bs-backdrop="static"
例子：
<div id="modal-user" class="modal fade" tabindex="-1" role="dialog" aria-hidden="true" data-bs-keyboard="false" data-bs-backdrop="static">
文档引导 5：https ://getbootstrap.com/docs/5.1/components/modal/#options
包括模态背景元素。或者，指定
static在单击时不会关闭模式的背景。
ಅನಿ*_*ಿಲ್ 32
在我的应用程序中,我使用下面的代码来通过jQuery显示Bootstrap模式.
$('#myModall').modal({
backdrop: 'static',
keyboard: true,
show: true
});
Dav*_*llo 29
您可以使用
$.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.
小智 7
结帐本::
$(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>小智 7
将此 CSS 用于 Modal 和 modal-dialog
.modal{
pointer-events: none;
}
.modal-dialog{
pointer-events: all;
}
这可以解决您在 Modal 中的问题
小智 7
这个解决方案对我有用：
$('#myModal').modal({backdrop: 'static', keyboard: false})
和
data-backdrop="static" data-keyboard="false"
在按钮中启动模态
尝试这个：
<div
class="modal fade"
id="customer_bill_gen"
data-keyboard="false"
data-backdrop="static"
>
如果您不知道模态是否已经打开，并且需要配置模态选项，则可以使用另一个选项：
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
小智 5
适用于我的解决方案如下：
$('#myModal').modal({backdrop: 'static', keyboard: false})
背景：禁用外部点击事件
键盘：禁用scape关键字事件
小智 5
<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-backdrop="non static"
希望能帮到你！
如果你想更改默认值：
对于引导程序 3.x：
$.fn.modal.prototype.constructor.Constructor.DEFAULTS.backdrop = 'static';
$.fn.modal.prototype.constructor.Constructor.DEFAULTS.keyboard = false;
对于引导程序 4.x 和 5.x：
$.fn.modal.prototype.constructor.Constructor.Default.backdrop = 'static';
$.fn.modal.prototype.constructor.Constructor.Default.keyboard = false;
| 归档时间： |
|
| 查看次数： |
569233 次 |
| 最近记录： |