Bootstrap遮罩效果

<!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 οnclick="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>
下载链接
版权声明：本文为u010730731原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接和本声明。