标签：
modal是Bootstrap提供的一个“窗口组件”，可以配合js实现弹出窗口的效果。
modal的class是“modal”，其中必须包含三个div部分，属性分别为modal-header,modal-body,modal-footer.
同时modal可以用来放置注册表单，示例如下：
<section> <div class="row"> <div class="span12"> <form class="modal form-horizontal" method="post" action="http://localhost"> <div class="modal-header"> <h1>Header</h1> </div> <div class="modal-body"> <fieldset> <div class="control-group"> <label class="control-label" for="username">Username:</label> <div class="controls"> <input type="text" name="username"> </div> </div> <div class="control-group"> <label class="control-label" for="password">Password:</label> <div class="controls"> <input type="password" name="password"> </div> </div> </fieldset> </div> <div class="modal-footer"> <input type="submit" class="btn btn-primary" value="Submit!"></button> </div> </form> </div> </div> </section>
如果我们利用Bootstrap提供的modal插件，可以形成点击弹出浮动窗口的效果。
这需要让modal的div带有属性hide和fade，指定id。并且一开始的stype是display:none以便隐藏同时还需要一个用来控制弹出的按钮，这个按钮必须有data-toggle="modal"的元素，href=modal的id。
如果想要在弹出表单中加入关闭按钮，则需要让按钮带有data-dismiss="modal"的属性。这样改造完成的页面代码：
<section> <a data-toggle="modal" href="#regModal" class="btn btn-primary">show!</a> <div class="row"> <form id="regModal" class="modal hide fade form-horizontal" method="post" action="http://localhost" style="display:none"> <div class="modal-header"> <h1>Header</h1> </div> <div class="modal-body"> <fieldset> <div class="control-group"> <label class="control-label" for="username">Username:</label> <div class="controls"> <input type="text" name="username"> </div> </div> <div class="control-group"> <label class="control-label" for="password">Password:</label> <div class="controls"> <input type="password" name="password"> </div> </div> </fieldset> </div> <div class="modal-footer"> <input type="submit" class="btn btn-primary" value="Submit!"> <input type="button" class="btn" value="Close!" data-dismiss="modal"> </div> </form> </div> </section>
当然既然这东西利用了js，也就能用js打开。一句话??$("#regModal").modal()
————个人觉得用js方式打开比较好??便于修改??反正装上jq是必然。就不在乎这点儿代码量了
同时modal这个plugin提供了一系列的事件等等。。。不多说了??
标签：
原文地址：http://www.cnblogs.com/Changero/p/4842872.html
