Bootstrap-模态框(弹出框)
投稿于 被查看 34565 次 评论:242
Bootstrap-模态框(弹出框)
Bootstrap的模态框模板:
html 代码片段
<div class="modal fade"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button> <h4 class="modal-title">Modal title</h4> </div> <div class="modal-body"> <p>One fine body…</p> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> <button type="button" class="btn btn-primary">Save changes</button> </div> </div><!-- /.modal-content --> </div><!-- /.modal-dialog --> </div><!-- /.modal -->
其中需要自己修改的地方是:
title/body/footer中对应的内容,footer中的按钮可要可不要。
注意:模态框 默认是隐藏的,启动的话需要对对应的菜单设置功能。
添加data-toggle="modal" data-target="#对应模态框的id" 属性,举例:
模态框ID设置为“about”
html 代码片段
<div class="modal fade" id="about">
对应菜单设置为:
html 代码片段
<li><a href="#" data-toggle="modal" data-target="#about">关于</a></li>
然后,点击菜单,就弹出模态框了。
用户评论