Bootstrap模态框modal的实现

最新推荐文章于 2024-08-21 09:17:03 发布

gyuei

最新推荐文章于 2024-08-21 09:17:03 发布

阅读量324

点赞数

分类专栏： Bootstrap

本文链接：https://blog.youkuaiyun.com/gyueh/article/details/102948362

版权

Bootstrap 专栏收录该内容

11 篇文章

订阅专栏

本文详细介绍了如何使用Bootstrap创建模态框效果，包括下载资源、引入样式库和JS文件、编写模态框代码等步骤，并提供了小、大模态框尺寸调整的方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

以下实例创建模态框效果:

1.下载用于生产环境的Bootstrap (网址：https://v3.bootcss.com/getting-started/#download)

2.在页面内head标签内引入样式库bootstrap.min.css

3.在页面内body标签尾部引入任意一jq库和bootstrap.min.js，

例如：

<head>
		<meta charset="UTF-8">
		<title>模态框</title>
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"/>
</head>
<body>
	<!--引入js-->
	<script  src="js/jquery-3.1.1.min.js"></script>
	<script  src="js/bootstrap.min.js"></script>
</body>

实现模态框代码如下：

<!--toggle展示与隐藏    data-toggle="dropdown" 让dropdown展示与隐藏-->
		 <!--data-target=".."    点击显示...-->
		 <!--data-dismiss=".."   点击关闭...-->
<!-- 按钮：用于打开模态框 -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#box">
  点击打开模态框
</button>
 
<!--框-->
<div class="modal fade" id="box">
  <!--模态框-->
  <div class="modal-dialog">
    <!--内容-->
    <div class="modal-content">
 
      <!-- 模态框头部 -->
      <div class="modal-header">
        <h4 class="modal-title">模态框头部</h4>
        <button type="button" class="close" data-dismiss="modal">&times;</button>
      </div>
 
      <!-- 模态框主体 -->
      <div class="modal-body">
        模态框内容..
      </div>
 
      <!-- 模态框底部 -->
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
      </div>

    </div>
  </div>
</div>

模态框的尺寸

通过为.modal-dialog 增加一个样式类来实现

1.小模态框