Bootstrap modal常用参数、方法和事件

最新推荐文章于 2024-05-10 16:24:44 发布

转载最新推荐文章于 2024-05-10 16:24:44 发布 · 276 阅读

CC 4.0 BY-SA版权

本文详细介绍了Bootstrap模态窗的参数设置，包括背景处理、键盘响应等，并提供了激活、切换状态的方法及各种事件的调用示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Bootstrap modal（模态窗）常用参数、方法和事件：

参数：

名称	类型	默认值	描述
Backdrop	Boolean或字符串“static”	True	True:有背景，点击modal外部，modal消失。 False:无背景，点击modal外部，modal不消失。 Static:有背景，点击modal外部，modal不消失。
Keyboard	Boolean	True	True:键盘上的esc按下关闭modal False：键盘上的esc按下不关闭modal
Show	Boolean	True	True：显示modal False：不显示modal

方法：

.modal(options)

将页面中的某内容作为模态窗激活。接受可选的参数object；

$(“#myModal”).modal();默认无参数

$(“#myModal”).modal({keyboard:false})

.modal(“toggle”)

手动打开或关闭模态窗。

$(“#myModal”).modal(“toggle”)

.modal(“show”)

手动打开模态窗

$(“myModal”).modal(“show”);

.modal(“hide”)

手动关闭模态窗

$(“myModal”).modal(“hide”);

事件：

事件类型	描述
Show.bs.modal	Show方法调用之后立即出发该事件，如果是通过点击某个作为触发器的元素，则此元素可以通过事件的realatedTarget属性进行访问。
Shown.bs.modal	此事件在模态窗已经显示出来（并且同事在css过度效果完成）之后出发，如果通过点击某个作为触发器的元素，则此元素可以通过事件的relatedTarget属性进行访问。
Hide.bs.modal	Hide方法调用之后立即出发该事件
Hidden.bs.modal	此事件在模态窗被隐藏（并且同时在css过渡效果完成）之后出发
Loaded.bs.modal	从远端的数据源加载完数据之后出发该事件

事件调用示例：

$(“#myModal”).on(“show.bs.modal”,function(e){

//do something ……

});

转载于:https://www.cnblogs.com/zhaochengshen/p/7079800.html