一、模态框(模态)是覆盖在父窗体上的子窗体。通常,目的是显示来自一个单独的源的内容,可以在不离开父窗体的情况下有一些互动。子窗体可提供信息,交互等。
二,如果想要单独引用该插件的功能,那么您需要引用,modal.js。或者可以引用,bootstrap.js 或压缩版的,bootstrap.min.js
引入之后直接上代码示例:
& lt; !DOCTYPE html>
& lt; html>
& lt; head>
& lt;元charset=皍tf - 8”比;
& lt; title>引导实例——模态框(模态)插件& lt;/title>
& lt;链接rel="样式表" href=" https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css " rel=巴獠縩ofollow”比;
& lt;脚本src=" https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js "祝辞& lt;/script>
& lt;脚本src=" https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js "祝辞& lt;/script>
& lt;/head>
& lt; body>
& lt; h3>创建模态框(模态)& lt;/h3>
& lt; !
按钮触发模态框:
类=" btn btn-primary btn-lg”:是指定类为“按钮的加大主”样式
data-toggle=澳Ｌ?应该是模态框的固定写法,只能为模态,至少自己试验发现是这样的
数据目标=" # myModal”:通过选择器指向id=癿yModal”的元素,也就是要显示和隐藏的模态框目标
——比;
& lt;按钮类=" btn btn-primary btn-lg”data-toggle=澳Ｌ笔菽勘?" # myModal "比;
开始演示模态框
& lt;/button>
& lt; !——模态框(模态)——比;
& lt; !
类=澳ＬА?模态,用来把div识别成模态框消失,当模态框被切换时,内容会淡入淡出
id=" myModal”:就是被指定为上面说的数据目标属性选择的元素
tabindex:属性规定元素的tab键控制次序
aria-labelledby=" myModalLabel”:引用模态框的标题(去掉影响不大)
aria-hidden:=" true ":设置模态框不可见,等到点击按钮之后显示
——比;
& lt; div类="模态消失" id=" myModal " tabindex=?”=岸曰翱颉盿ria-labelledby=癿yModalLabel”角色aria-hidden=" true "比;
& lt; div类=澳Ｌ曰翱颉北?
祝辞& lt; div class="模式内容”;
& lt; div类=癿odal-header”比;
& lt; !——data-dismiss=澳Ｌ?加上这个,使得点击该按钮时会关闭模态框、下面的关闭按钮也是一样加了这个属性——比;
& lt;按钮类型=鞍磁ァ眂lass=肮乇铡眃ata-dismiss=澳Ｌ盿ria-hidden=" true "比;
和次;
& lt;/button>
& lt; h5类=" modal-title " id=癿yModalLabel”比;
模态框(模态)标题
& lt;/h5>
& lt;/div>
& lt; div类=癿odal-body”比;
& lt;输入类型=拔谋尽闭嘉环?笆淙搿痹?
& lt;/div>
& lt; div类=癿odal-footer”比;
& lt;按钮类型=鞍磁ァ崩?癰tn btn-default data-dismiss”=澳Ｌ钡脑诠乇? lt;/button>
& lt;按钮类型=鞍磁ァ眂lass=癰tn btn-primary祝辞提交更改& lt;/button>
& lt;/div>
& lt;/div> & lt; !——/ＤＪ侥谌荨?
& lt;/div> & lt; !——/ＤＬ?
& lt;/div>
& lt;/body>
& lt;/html>
运行效果图如下:
如果大家还想深入学习,可以点击这里进行学习,再为大家附3个精彩的专题:
引导学习教程
引导实战教程
引导插件使用教程
以上就是关于本文的全部内容,希望对大家的学习有所帮助。
