modal-------------Bootstrap

modal是Bootstrap提供的一个“窗口组件”，能够配合js实现弹出窗口的效果。

modal的class是“modal”，其中必须包含三个div部分，属性分别问modal-header,modal-body,modal-footer.

同时modal能够用来放置注册表单，示例以下：

1. <section>  

2.     <div class="row">  

3.         <div class="span12">  

4.             <form class="modal form-horizontal" method="post" action="http://localhost">  

5.                     <div class="modal-header">  

6.                         <h1>Header</h1>  

7.                     </div>  

8.                     <div class="modal-body">  

9.                         <fieldset>  

10.                             <div class="control-group">  

11.                                 <label class="control-label" for="username">Username:</label>  

12.                                 <div class="controls">  

13.                                     <input type="text" name="username">  

14.                                 </div>  

15.                             </div>  

16.                             <div class="control-group">  

17.                                 <label class="control-label" for="password">Password:</label>  

18.                                 <div class="controls">  

19.                                     <input type="password" name="password">  

20.                                 </div>  

21.                             </div>  

22.                         </fieldset>  

23.                     </div>  

24.                     <div class="modal-footer">  

25.                         <input  type="submit" class="btn btn-primary" value="Submit!"></button>  

26.                     </div>  

27.             </form>  

28.         </div>  

29.     </div>  

30. </section>  

若是咱们利用Bootstrap提供的modal插件，能够造成点击弹出浮动窗口的效果。

这须要让modal的div带有属性hide和fade，指定id。而且一开始的stype是display:none以便隐藏同时还须要一个用来控制弹出的按钮，这个按钮必须有data-toggle="modal"的元素，href=modal的id。

若是想要在弹出表单中加入关闭按钮，则须要让按钮带有data-dismiss="modal"的属性。这样改造完成的页面代码：

1. <section>  

2. <a data-toggle="modal" href="#regModal" class="btn btn-primary">show!</a>         

3.     <div class="row">  

4.         <form id="regModal" class="modal hide fade form-horizontal" method="post" action="http://localhost" style="display:none">  

5.             <div class="modal-header">  

6.                 <h1>Header</h1>  

7.             </div>  

8.             <div class="modal-body">  

9.                 <fieldset>  

10.                     <div class="control-group">  

11.                         <label class="control-label" for="username">Username:</label>  

12.                         <div class="controls">  

13.                             <input type="text" name="username">  

14.                         </div>  

15.                     </div>  

16.                     <div class="control-group">  

17.                         <label class="control-label" for="password">Password:</label>  

18.                         <div class="controls">  

19.                             <input type="password" name="password">  

20.                         </div>  

21.                     </div>  

22.                 </fieldset>  

23.             </div>  

24.             <div class="modal-footer">  

25.                 <input  type="submit" class="btn btn-primary" value="Submit!">  

26.                 <input type="button" class="btn" value="Close!" data-dismiss="modal">  

27.             </div>  

28.         </form>  

29.     </div>  

30. </section>  

固然既然这东西利用了js，也就能用js打开。一句话⋯⋯$("#regModal").modal()

————我的以为用js方式打开比较好⋯⋯便于修改⋯⋯反正装上jq是必然。就不在意这点儿代码量了

同时modal这个plugin提供了一系列的事件等等