第一步要先导入,然后才可以进行下一步
<h2>创建模态框(Modal)</h2>
<!-- 按钮触发模态框 -->
<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">开始演示模态框</button>
<!-- 模态框(Modal) -->
<div class="modal fade" id="myModal" tabindex="-1" role="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-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title" id="myModalLabel">模态框(Modal)标题</h4>
</div>
<div class="modal-body">在这里添加一些文本</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
<button type="button" class="btn btn-primary">提交更改</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal -->
</div>
先从按钮里面的属性开始,class是给按钮定义的类名里面的btn btn-primary btn-lg都是定义的BootStrap写好的样式,BootStrap有很多写好的样式和定义好的图标,重点的是后面的”data-“这一属性,这是html5中给标签的自定义属性,如果使用BootStrap模态框就要用到这一属性:
1、data-toggle=”modal”,HTML5 自定义的 data 属性 data-toggle 用于打开模态窗口。
2、data-target=”#myModal” 是您想要在页面上加载的模态框的目标。您可以在页面上创建多个模态框。(注意:使用那个模态框,就把哪个模态框的id写在data-target=”“中,例如,我定义的是id=”myModal”。)
3、重点:调用模态框,data-toggle data-toggle这两个属性一个不能少。
二、模态框
模态框本体其实就是页面中的一部分,只不过通过BootStrap中定义好的classl类,通过引用样式来达到效果。
1、.modal,用来把
的内容识别为模态框。.fade 当模态框被切换时,它会引起内容淡入淡出。aria-labelledby=”myModalLabel”,该属性引用模态框的标题。aria-hidden=”true” 用于保持模态窗口不可见,直到触发器被触发为止(比如点击在相关的按钮上)。
2、
2、
,modal-header 是为模态窗口的头部定义样式的类。data-dismiss=”modal”,是一个自定义的 HTML5 data 属性。在这里它被用于关闭模态窗口。
3、class=”modal-body”,是 Bootstrap CSS 的一个 CSS class,用于为模态窗口的主体设置样式。这里你可以根据自己的需要往里面放入自己想要的标签 比如文本。根据自己需要可以自行放入模态框内容。比如博主自己在模态框主题中添加了文本框和
4、class=”modal-footer”,是 Bootstrap CSS 的一个 CSS class,用于为模态窗口的底部设置样式。
3、class=”modal-body”,是 Bootstrap CSS 的一个 CSS class,用于为模态窗口的主体设置样式。这里你可以根据自己的需要往里面放入自己想要的标签 比如文本。根据自己需要可以自行放入模态框内容。比如博主自己在模态框主题中添加了文本框和
4、class=”modal-footer”,是 Bootstrap CSS 的一个 CSS class,用于为模态窗口的底部设置样式。