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 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>
下载链接
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值