bootstrap使用总结

最新推荐文章于 2024-04-10 14:09:14 发布

原创最新推荐文章于 2024-04-10 14:09:14 发布 · 859 阅读

CC 4.0 BY-SA版权

本文介绍如何通过设置Bootstrap Modal的backdrop和keyboard参数为'static'及false来阻止点击空白区域或按ESC键关闭弹窗。这对于希望保持模态框打开状态直至完成特定任务的应用场景非常有用。

如何禁用 BootStrap Modal 点击空白时自动关闭的方法

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

backdrop 为 static 时，点击模态对话框的外部区域不会将其关闭。
keyboard 为 false 时，按下 Esc 键不会关闭 Modal。

可以将选项通过 data 属性或 JavaScript 代码传递。对于 data 属性，需要将参数名称放到 data- 之后，例如 data-backdrop=""。

名称	类型	默认值	描述
backdrop	boolean 或字符串`'static'`	true	Includes a modal-backdrop element. Alternatively, specify `static` for a backdrop which doesn't close the modal on click.
keyboard	boolean	true	键盘上的 esc 键被按下时关闭模态框。
show	boolean	true	模态框初始化之后就立即显示出来。
remote	path	false	This option is deprecated since v3.3.0 and will be removed in v4. We recommend instead using client-side templating or a data binding framework, or calling jQuery.loadyourself. 如果提供的是 URL，将利用 jQuery 的 `load` 方法从此 URL 地址加载要展示的内容（只加载一次）并插入 `.modal-content` 内。如果使用的是 data 属性 API，还可以利用 `href` 属性指定内容来源地址。下面是一个实例：复制 `<a data-toggle="modal" href="remote.html" data-target="#modal">Click me</a>`