欢迎访问移动开发之家(rcyd.net),关注移动开发教程。移动开发之家  移动开发问答|  每日更新
页面位置 : > > > 内容正文

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">&times;</span></button>
        <h4 class="modal-title">Modal title</h4>
      </div>
      <div class="modal-body">
        <p>One fine body&hellip;</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 -->

其中需要自己修改的地方是:

Bootstrap-模态框(弹出框)

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>

然后,点击菜单,就弹出模态框了。

用户评论