bootstrap模态框点击周边不隐藏、js控制隐藏、去除关闭按钮

最新推荐文章于 2024-05-23 21:59:51 发布

jin—zzc

最新推荐文章于 2024-05-23 21:59:51 发布

阅读量773

点赞数 1

文章标签： java bootstrap js jquery

原文链接：https://blog.csdn.net/meism5/article/details/104510909/

版权

实现功能：

默认不显示模态框：aria-hidden=“true”
点击模态框周边和 esc 按钮，不自动隐藏模态框：data-backdrop=“static” data-keyboard=“false”
使用 js 中的 show 函数控制模态框的显示；hide 函数控制模态框的隐藏

完整代码如下：

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8"> 
	<title>模态框（Modal）插件</title>
	<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>
</head>
<body>
<!-- 按钮触发模态框 -->
<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#modal">
	打开模态框
</button>
<!-- 模态框内容 -->
<div class="modal fade" id="modal" tabindex="-1" role="dialog" aria-labelledby="modalLabel" aria-hidden="true" data-backdrop="static" data-keyboard="false">
	<div class="modal-dialog">
		<div class="modal-content">
			<div class="modal-header">
				<h4 class="modal-title" id="modalLabel">
					模态框标题
				</h4>
			</div>
			<div class="modal-body">
				内容
			</div>
			<div class="modal-footer">
				<button type="button" class="btn btn-primary">
					按钮
				</button>
			</div>
		</div><
	</div>
	<script type="text/javascript">
		//js里调用show函数，控制打开模态框
		function show() {
			$('#modal').modal('show');
		}
		//js里调用close函数，控制关闭模态框
		function hide() {
			$('#modal').modal('hide');
		}
	</script>
</div>
</body>
</html>

jin—zzc

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
bootstrap模态框点击周边不隐藏、js控制隐藏、去除关闭按钮

实现功能：默认不显示模态框：aria-hidden=“true”点击模态框周边和 esc 按钮，不自动隐藏模态框：data-backdrop=“static” data-keyboard=“false”使用 js 中的 show 函数控制模态框的显示；hide 函数控制模态框的隐藏完整代码如下：<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>模态框（Modal）
复制链接

扫一扫