Piggy的Bootstrap（五）插件的应用

本章插件讲得主要是modal的弹窗。先来看效果：

这个弹窗和alert有所不同，需要自己定义一系列的东西，代码：

<button class="btn btn-primary" data-toggle="modal" data-target="#myModal">
		弹窗
    </button>
	<button class="btn btn-warning" data-toggle="modal" data-target="#danger">
		测试按钮
	</button>

	<div class="modal" id="danger">
		测试文本
	</div>


    <div class="modal fade" id="myModal">
    	<div class="modal-dialog">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal">
						<span>×</span>
						<span class="sr-only">关闭弹窗</span>
					</button>
					<h4 class="modal-title" id="myModalLabel">
						标题
					</h4>
				</div>
				<div class="modal-body">
					慕课网
				</div>
				<div class="modal-footer">
					<button class="btn btn-primary" data-dismiss="modal">
						关闭
					</button>
					<button class="btn btn-primary">
						保存
					</button>
				</div>
			</div>
    	</div>
    </div>

一句一句来。

首先是第一个弹窗：

<button class="btn btn-primary" data-toggle="modal" data-target="#myModal">
		弹窗
    </button>

 <div class="modal fade" id="myModal">
    	<div class="modal-dialog">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal">
						<span>×</span>
						<span class="sr-only">关闭弹窗</span>
					</button>
					<h4 class="modal-title" id="myModalLabel">
						标题
					</h4>
				</div>
				<div class="modal-body">
					慕课网
				</div>
				<div class="modal-footer">
					<button class="btn btn-primary" data-dismiss="modal">
						关闭
					</button>
					<button class="btn btn-primary">
						保存
					</button>
				</div>
			</div>
    	</div>
    </div>、

这个弹窗由按钮点击弹出。首先是按钮部分。在这个按钮部分中，我们使用了两个基于data-前缀的属性：data-toggle和data-target。第一个前一章说过，用于调用class为modal的div，第二个是绑定被调用的div的id。modal被称为模态框，可在父窗体内进行一系列子窗体的互动。接下来，是被绑定的id为myModal的div，在第一层的div中，我们对其的class约束为modal和fade。第一个为当前的div为modal的div，第二个fade为此模态框的动画为渐入渐出。接下来声明id为myModal。第二层中，我们对此弹窗进行定义，为modal-dialog，接下来是窗体的内容，包括头部，具体内容部分，尾部（脚注）。头部部分包括一个关闭按钮个一个仅供屏幕阅读器使用的关闭按钮。第一个关闭按钮中，我们使用&times为关闭形状，并绑定data-dismiss为关闭动作，在第二个的class为sr-only中，涉及到屏幕阅读器，目的在为视觉障碍人士提供便捷。按钮后接的是弹窗的头部标题。接下来是body部分。我们使用modal-body对其定义。最后是尾部（modal-footer定义），同样，关闭按钮使用data-dismiss对关闭绑定。