Bootstrap遮罩效果

最新推荐文章于 2025-05-28 10:23:02 发布

原创最新推荐文章于 2025-05-28 10:23:02 发布 · 1.2w 阅读

6 ·

CC 4.0 BY-SA版权

文章标签：

#bootstrap #js

前端专栏收录该内容

6 篇文章

订阅专栏

<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title>遮罩层DEM</title>
		<!-- Bootstrap -->
		<link href="css/bootstrap.min.css" rel="stylesheet">
		<script src="js/jquery-3.1.1.min.js"></script>
		<script src="js/bootstrap.min.js"></script>
		<style type="text/css">
			.loading {
				background: #00000040 url(images/loadingMask.gif) no-repeat center 50%;
				z-index: 9999;
			}
		</style>
	</head>

	<body>
		<div class="container-fluid text-center">
			<h2>遮罩层DEMO</h2>
			<!-- 按钮触发模态框 -->
			<button onclick="startup()">遮罩层</button>
			<!-- 遮罩层模态框（Modal） -->
			<div class="modal fade loading" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" data-backdrop="static" data-keyboard="false">
				// data-backdrop="static" data-keyboard="false" // 以上属性是静止掉了模态框的关闭按钮和点击空白处关闭模态框
			</div>
			<script>
				function startup() {
					$("#myModal").modal('show');
					setTimeout('shutdown()', 5000);
				}

				function shutdown() {
					$("#myModal").modal('hide');
				}
			</script>
	</body>

</html>

下载链接