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提供了一系列的事件等等