模态框

最新推荐文章于 2024-07-20 17:41:17 发布

weixin_45807545

最新推荐文章于 2024-07-20 17:41:17 发布

阅读量79

点赞数

文章标签： bootstrap

本文链接：https://blog.csdn.net/weixin_45807545/article/details/103689656

版权

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <meta name="viewport"
        content="width=device-width,initial-scale=1"/>
  <link rel="stylesheet" href="../css/bootstrap.css">
  <script src="../js/jquery.min.js"></script>
  <script src="../js/popper.min.js"></script>
  <script src="../js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<!--  打开模态框的按钮-->
  <button class="btn btn-danger" data-toggle="modal"
          data-target="#demo">打开模态框
  </button>
<!--  模态框的内容-->
<!--1-->  <div id="demo" class="modal"><!--固定定位-->
<!--2-->    <div class="modal-dialog"><!--响应式-->
<!--3-->      <div class="modal-content"><!--弹性-->
                <div class="modal-header">
                  <h4>模态框标题</h4>
                  <button class="close"
                          type="button"
                          data-dismiss="modal">&times;</button>
                </div>
                <div class="modal-body">
                  Lorem ipsum dolor sit amet,
                  consectetur adipisicing elit.
                  Excepturi, vero!
                </div>
                <div class="modal-footer">
                  <button type="button"
                          class="btn btn-danger"
                          data-dismiss="modal">关闭
                  </button>
                </div>
              </div>
            </div>
          </div>
</div>
</body>
</html>