bootstrap模态框

最新推荐文章于 2025-04-28 06:02:16 发布

weixin_30849591

最新推荐文章于 2025-04-28 06:02:16 发布

阅读量65

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/persist-yang-1314/p/8028478.html

最近公司用到bootstrap框架，没接触过，从官网学到的模态框特此做整理记录下来供自己学习。

千万不要在一个模态框上重叠另一个模态框。要想同时支持多个模态框，需要自己写额外的代码来实现。

务必将模态框的 HTML 代码放在文档的最高层级内（也就是说，尽量作为 body 标签的直接子元素），以避免其他组件影响模态框的展现和/或功能。

务必为 `.modal` 添加 `role="dialog"` 和 `aria-labelledby="..."` 属性，用于指向模态框的标题栏；为 `.modal-dialog` 添加 `aria-hidden="true"` 属性。

<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
    <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" id="myModalLabel">Modal title</h4>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
        <button type="button" class="btn btn-primary">保存（提交/自定义）</button>
      </div>
    </div>
  </div>
</div>

//定义一个按钮用来弹出这个模态框

<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
  弹出模态框
</button>

//还有一种通过js加载后台数据返回页面，加载进这个模态框显示

　function show() {
$("#myModalContent").load("url");
$("#myModal").modal("show");
}

转载于:https://www.cnblogs.com/persist-yang-1314/p/8028478.html