我正在做一个bootstrap网站,与一对bootstrap 'Modals'。 我正在尝试自定义一些默认功能。
问题在于; 你可以通过点击背景来关闭模式。 有没有办法禁用这个功能? 只在特定的情态动词?
引导模态页面
我正在做一个bootstrap网站,与一对bootstrap 'Modals'。 我正在尝试自定义一些默认功能。
问题在于; 你可以通过点击背景来关闭模式。 有没有办法禁用这个功能? 只在特定的情态动词?
引导模态页面
当前回答
有两种方法禁用自举模型区域之外的点击关闭模式
使用javascript $ (' # myModal ') .modal ({ 背景:“静态”, 键盘:假 }); 在HTML标签中使用data属性 data- background ="static" data-keyboard="false" //把这个属性写在你点击打开模态弹出窗口的按钮里。
其他回答
<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 ="非静态"
希望这对你有所帮助!
在Options一章中,在您链接的页面中,您可以看到背景选项。通过这个值为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>`
把这段代码放在modal html的第一个块中
引导4.倍
-keyboard = "和"日期-backdrop =“静态”
Boostrap 5.倍
data-bs-keyboard = " false " data-bs-backdrop =“静态”
例子:
<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
包括一个情态背景元素。或者,为背景指定静态,它不会在单击时关闭模式。
将此CSS用于模态和模态对话框
.modal{
pointer-events: none;
}
.modal-dialog{
pointer-events: all;
}
这可以解决您在Modal中的问题
如果你想更改默认值:
对于引导3.x:
$.fn.modal.prototype.constructor.Constructor.DEFAULTS.backdrop = 'static';
$.fn.modal.prototype.constructor.Constructor.DEFAULTS.keyboard = false;
对于bootstrap 4。X和5.x:
$.fn.modal.prototype.constructor.Constructor.Default.backdrop = 'static';
$.fn.modal.prototype.constructor.Constructor.Default.keyboard = false;