Bootstrap模态窗口

在一些网站上，当我们点击登录按钮或者是注册按钮时，会弹出一个小的窗口在页面上显示，二页面上的内容还能隐隐约约看见，就如下面图片一样,这种样式可以使用Bootstrap中模态框来快速又简单的实现。

触发器

在使用模态框之前，得先要有一个触发器来触发模态框，触发器可以是按钮或者链接等，在这里我们使用按钮来当触发器。

	<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">
	  打开模态框
	</button>

该按钮的class属性是为按钮提供样式，data-target属性的值是选择需要打开的模态框的id，data-toggle=“modal” 用于打开模态框。只有设置了这几种属性，我们才可以使按钮被点击后打开相应的模态框。

模态框

<!-- 模态框 -->
	<div class="modal fade" id="myModal">
	  <div class="modal-dialog">
	    <div class="modal-content modelbox">
	 	</div>
	  </div>
	</div>

模态框主体由三个div组成：

• 第一个div：class设置为modal 是用来把<div>的内容识别为模态框，class另一个值fade是让模态框的状态被切换时有一个淡入淡出的效果这个值由bootstrap框架提供。。id为myModal，这个值就是按钮data-target属性的值，绑定之后点击按钮才能将模态框显示出来。这个值由bootstrap框架提供。
• 第二个div：是控制模态框的边框的位置，我们在设置模态框时，大多数情况下用不到全屏幕，因此需要一个div来控制大小并且控制内容出现的位置。class属性所给的值就是控制其位置位于页面中间，值为：modal-dialog。这个值由bootstrap框架提供。
• 最里面的 div则是具体内容的容器，在这个里面我们可以将我们需要的内容填充进去，使其功能更加完善。例如页面右上角的×，

<button type="button" class="close" data-dismiss="modal">&times;</button>

在bnootstrap中为我们提供了一个close的class名字，我们将其运用到button按钮上就成了一个显示×的按钮。而我们要关闭模态框，则要添加 **data-dismiss=“modal”**这段属性，专门用来关闭模态框。