Bootstrap modal

发布时间：2020-12-17 21:14:22 所属栏目：安全来源：http://v3.bootcss.com/ modal是

导读：中文官方网站：http://v3.bootcss.com/ modal是Bootstrap提供的一个“窗口组件”，可以配合js实现弹出窗口的效果。 modal的class是“modal”，其中必须包含三个div部分，属性分别问modal-header,modal-body,modal-footer. 同时modal可以用来放置注册表单，示

中文官方网站：http://v3.bootcss.com/

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

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

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

[html]? 
   view plain 
   copy 
   print 
   ? 
    
   
 <section>??
 ????div?class="row">??
 ????????div?class="span12" ????????????form?class="modal?form-horizontal"?method="post"?action="http://localhost" ????????????????????div?class="modal-header" ????????????????????????h1>Header</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" ????????????????????????????label?class="control-label"?for="password">Password:input?type="password"?name="password"div?class="modal-footer"input??type="submit"?class="btn?btn-primary"?value="Submit!">button ????????????form ???????? ???? >??

如果我们利用Bootstrap提供的modal插件，可以形成点击弹出浮动窗口的效果。

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

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

?

data-toggle

"modal"

href

"#regModal"

class

"btn?btn-primary"

show!

?????????

form?id="regModal"?class="modal?hide?fade?form-horizontal"?method="post"?action="http://localhost"?style="display:none" ???????????????? ????????????????input?type="button"?class="btn"?value="Close!"?data-dismiss="modal">??

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

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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!