引导模态对话框用法简单示例

本文实例讲述了引导程序模态对话框用法。分享给大家供大家参考，具体如下：

环境：bootstrap-3.3.5，jquery-3.0.0

代码：

！titlewww.jb51.net自举模态对话框/title meta http-equiv=' Content-type ' Content=' text/html；charset=utf-8“link rel=”样式表href=' https://cdn。bootscs。com/bootstrap/3。3 .5/CSS/bootstrap。量滴CSS ' rel='外部nofollow'/link rel='样式表href=' https://cdn。bootscs。com/bootstrap/3。3 .5/CSS/bootstrap-主题。量滴CSS ' rel='外部no follow/script src=' http :33599创建模态框（模态)/h2！-按钮触发模态框-button class=' BTN BTN-主BTN-LG ' data-toggle=' modal ' data-target=' # my modal '开始演示模态框/button！-模态框(Modal)-div class=' Modal fade ' id=' MyModal ' tabindex='-1 '角色=' dialog ' aria-labelledby=' myModalLabel ' aria-hidden=' true ' div class=' Modal-dialog ' div class=' Modal-content ' div class=' Modal-header ' button type=' button ' class=' close ' data-misse=' Modal ' aria-hidden=' true '/button H4 class=' Modal-title ' id=' myModalLabel '模态框（模态)标题/h4 /div class='modal-body '在这里添加一些文本/div div class='模态-页脚'按钮类型='button' class='btn btn-default '数据-消除='模态'关闭/button button type=' button ' class=' BTN BTN-primary '提交更改/button /div /div！ - /.模态-内容- /div！- /.模态/div /body/html小编已经将代码中所引用的引导程序相关css、js文件全部换成了内容交付网络形式，方便测试。

这里使用在线HTML/CSS/JavaScript代码运行工具：http://工具。JB 51。net/code/HTMljsrun测试，可得到如下显示效果：

PS:关于引导程序布局，这里再为大家推荐一款本站的在线可视化布局工具供大家参考使用：

在线引导程序可视化布局编辑工具：http://工具。JB 51。net/辅助设计/布局它

希望本文所述对大家基于引导程序的程序设计有所帮助。