Bootstrap的一些筆記——modal

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提供了一系列的事件等等。。。不多說了⋯⋯