BootStrap中的模态框（模态,弹出层)功能示例代码

引导程序中的模态框（模态),不同于工具提示，模态框以弹出对话框的形式出现，具有最小和最实用的功能集。务必将模态框的超文本标记语言代码放在文档的最高层级内（也就是说，尽量作为身体标签的直接子元素),以避免其他组件影响模态框的展现或功能。

默认的情态的示例：

！DOCTYPE html html lang=' zh-CN ' head meta charset=' utf-8 ' meta http-equiv=' X-UA-Compatible ' content=' IE=edge ' meta name=' viewport ' content=' width=device-width，initial-scale=1 ' title bootstrap Modal/title link rel='样式表href=' http://cdn。bootscs。com/bootstrap/3。3 .5/CSS/bootstrap。量滴CSS/head dybutton type=' button ' class=' btcss '为。情态的添加角色='对话框，用于指定模态框为对话框。为。模态对话添加aria-hidden='true '属性。通过艾瑞亚-描述比属性为模态框。情态的添加描述性信息。关闭动画如果你不需要模态框弹出时的动画效果（淡入淡出效果),删掉。乏味的类即可。

通过按钮属性显示不同内容当有一堆按钮，都要触发相同的模态框（如：向好友列表中某个人发消息),只是有用户身份不同，那么可以使用数据-随便配合event.relatedtarget来实现：

！DOCTYPE html html lang=' zh-CN ' head meta charset=' utf-8 ' meta http-equiv=' X-UA-Compatible ' content=' IE=edge ' meta name=' viewport ' content=' width=device-width，initial-scale=1 ' title bootstrap Modal/title link rel='样式表href=' http://cdn。bootscs。com/bootstrap/3。3 .5/CSS/bootstrap。量滴CSS '/headdydiv class=' panel panel-default ' div class=' panel-heading '好友列表/div class=' panel-body ' div class=' list-group '角色='group' aria-label='好友列表button type=' button ' class=' list-group-item ' data-toggle=' modal ' data-target=' # example modal ' data-what='张三'张三/button button type=' button ' class=' list-group-item ' data-toggle=' modal ' data-target=' # 示例模式“数据-什么=”李四'李四/button button type=' button ' class=' list-group-item ' data-toggle=' modal ' data-target=' # 示例模式“数据-什么=”王二'王二/button/div/div/class=' modal fade ' id=' example modal ' tabindex='-1 '角色=' dialog ' aria-labelledby=' exampleModalLabel ' div class=' modal-dialog '角色=' document ' div class=' modal-content ' div class=' modal-header ' button type=' button ' class=' Close ' data-disable=' modal ' aria-label=' Close ' span aria-hidden=' true '/span/button H4类=' modal-title ' id=' textarea类=' form-control ' id=' message-text '/text area/div/form/div类=“模式页脚”按钮类型=' button ' class=' BTN BTN-默认' data-mission=' model ' close/button类型=' button ' class=' BTN BTN-primary '发送消息/button/div/div/div脚本src=' http 3360http://cdn。 bootscs。com/jquery/1。11 .3/jquery。min on('show.bs.modal '，function(event){ var button=$(event。相关目标)//触发事件的按钮var recipient=按钮。数据('什么')//解析出数据-随便内容var modal=$(this) modal.find(' .模态标题')。文本("邮件收件人")模式。查找(。模态体输入')。val(收件人)})/脚本/正文/html通常不需写Java脚本语言代码也可激活模态框。通过在一个起控制器作用的元素（例如：按钮)上添加数据切换='模式'属性，或者data-target='#foo '属性，再或者href=' # foo ' rel='外部无跟随'属性，用于指向被控制的模态框。通过Java脚本语言调用情态的通常只需一行Java脚本语言代码，即可通过元素的id myModal调用模态框：

$('#myModal ').模态（选项)JavaScript参数：

可以将选项通过数据属性或Java脚本语言代码传递。对于数据属性，需要将参数名称放到资料之后，例如数据背景=' ' .

调用示例

1.将页面中的某块内容作为模态框激活。

接受可选参数对象。

$('#myModal ').模态({ keyboard: false})2 .手动打开或关闭模态框。在模态框显示或隐藏之前返回到主调函数中（也就是，在触发出现了。bs。情态的或hidden.bs.modal事件之前)。$('#myModal ').模态("切换")3。手动打开模态框。在模态框显示之前返回到主调函数中（也就是，在触发出现了。bs。情态的事件之前)。$('#myModal ').情态('显示')4 .手动隐藏模态框。在模态框隐藏之前返回到主调函数中（也就是，在触发hidden.bs.modal事件之前)。$('#myModal ').莫代尔('隐藏')5 .更新模态框，在模态框动态添加或删除内容时：$('#myModal ').模态(“手柄更新”)

绑定事件

引导程序的模态框类提供了一些事件用于监听并执行你自己的代码。

如：

$('#myModal ').on('hidden.bs.modal '，函数(e) { //做某事.})总结

以上是边肖介绍的BootStrap中模态盒(弹出层)函数的示例代码。希望对大家有帮助。如果你有任何问题，请给我留言，边肖会及时回复你。非常感谢您对我们网站的支持！