bootstrip 实现弹出框效果

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

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

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

[html] view plaincopyprint?

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"的属性。这样改造完成的页面代码：

[html] view plaincopyprint?

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()

bootstrip 实现弹出框效果