Bootstrap 模态框使用记录_模态框实现数据的更新和历史操作记录的展示-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_41953178/article/details/102517730

本文详细介绍了如何使用Bootstrap创建模态框，包括引入必要的库文件、设置模态框的属性和触发方式，以及如何通过代码实现模态框的显示与隐藏。

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

需要引入的文件:

<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>

代码:

    <!-- 模态框（Modal） -->
	<div class="modal fade" id="myModal" data-backdrop="static" 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">
						&times;
					</button>
					<h4 class="modal-title" id="myModalLabel">
						模态框（Modal）标题
					</h4>
				</div>
				<!-- 模态框主体内容 -->
				<div class="modal-body" style="overflow: hidden;">
					<img src="http://www.noerror.vip/upload/bannerimg/5f7211d4-15be-4925-be9c-c755eab3168c.jpg"
						 style="max-width: 570px;" />
				</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>

特殊属性:

data-backdrop--true/false/static

true:默认值，外部灰色遮盖，点击外部可关闭模态框

false:外部无遮盖，点击外部不可关闭模态框

static:外部灰色遮盖，点击外部不可关闭模态框

        <!-- 按钮触发模态框 -->
		<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
			开始演示模态框
		</button>