bootstrap点击遮罩不关闭弹出框

最新推荐文章于 2024-07-10 19:56:48 发布

梦里梦见梦不见的

最新推荐文章于 2024-07-10 19:56:48 发布

阅读量2.4k

点赞数 1

分类专栏：前端

本文链接：https://blog.csdn.net/weixin_43240792/article/details/85200590

版权

前端专栏收录该内容

29 篇文章 0 订阅

订阅专栏

bootstrap默认状态下点击弹出框周围的遮罩会自动关闭弹出框，可以通过设置backdrop让点击遮罩时不关闭弹出框。

设置方法有两种：

1直接在弹出框的标签上添加 data-backdrop=“static”
2.使用jq对弹出框设置代码：
$("#myModal").modal({backdrop:‘static’});
在这里插入图片描述

详解：

效果图：
在这里插入图片描述 1、点击打开遮罩层按钮

2、弹出一个隐藏的div

3、实现过程
（1）引入bootstrap.min.css、bootstrap.min.js文件
（2）实现代码：

<!DOCTYPE html>
<html>
	<head>
	<!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
	
		<title>遮罩层DEM</title>
	<!-- Bootstrap -->
		<link href="css/bootstrap.min.css" rel="stylesheet">
		<link href="css/index/index.css" rel="stylesheet">
	<!-- jQuery (Bootstrap的JavaScript插件所必需的) -->
		<script src="js/jquery-2.1.4.min.js"></script>
		<script src="js/bootstrap.min.js"></script>
 
	<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
	<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
	<!--[if lt IE 9]>
	      <script src="js/adaptIE/html5shiv.min.js"></script>
	      <script src="js/adaptIE/respond.min.js"></script>
	   <![endif]-->
		<style></style>
	</head>  
	<body>
		<div class="container-fluid text-center">
			<h2>遮罩层DEMO</h2>
	<!-- 按钮触发模态框 -->
			<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">遮罩层标题</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>
	</body>
 
</html>

在这里插入图片描述
参考：http://www.ziqiangxuetang.com/bootstrap/bootstrap-modal-plugin.html