bootstrap模态框

最新推荐文章于 2020-10-29 14:40:21 发布

bbsdsz

最新推荐文章于 2020-10-29 14:40:21 发布

阅读量536

点赞数 1

CC 4.0 BY-SA版权

分类专栏： bootstrap

本文链接：https://blog.youkuaiyun.com/bbsdsz/article/details/51918046

bootstrap 专栏收录该内容

2 篇文章

订阅专栏

模态框初学，点击遮盖层时关闭遮盖层，通过设置data-backdrop属性为"static"可以解决这个问题
<button class="btn btn-primary btn-lg" data-toggle="modal" 
   data-target="#myModal">
   模态框
</button>

<!-- 模态框（Modal） -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" 
   aria-labelledby="myModalLabel" aria-hidden="true">
   <div class="modal-dialog">
      <div class="modal-content">
         <div class="modal-header">
            <button type="button" class="close" 
               data-dismiss="modal" aria-hidden="true">
                  ×
            </button>
            <h4 class="modal-title" id="myModalLabel">
               模态框（Modal）标题
            </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><!-- /.modal-content -->
</div><!-- /.modal -->
</div>
初次使用时，引入了过多的bootstrap的js文件和css导致冲突，删除多余的js文件，可以解决，只引入bootstrap.css、jquery.js、bootstrap.js

模态框需要按钮或者链接来触发