博客

遮罩层+弹窗全套实例，包括jq点击事件及禁止屏幕滑动

适合新手小白学习理解

HTML代码

		<!-- 遮罩层 -->
		<div class="maskLayer">
			<!-- 弹窗 -->
			<div class="popup">
				<div class="btn-close">关闭弹窗</div>
			</div>
		</div>
		<!-- 内容 -->
		<div class="content">
			<div class="item1">
				<div class="btn-click">点击出现弹窗</div>
			</div>
			<div class="item2"></div>
			<div class="item3"></div>
			<div class="item4"></div>
		</div>

CSS代码

注：遮罩层的定位必须用fixed才会始终撑满当前页面，absolute是相对于body的定位，遮罩层不会铺满整个页面

			.maskLayer{
				width: 100%;
				height: 100%;
				background-color: rgba(0,0,0,.5);
				position: fixed;
				top: 0;
				left: 0;
				z-index: 99;
				display: none;
			}
			.popup{
				width: 80%;
				height: 30rem;
				background-color: #FFFFFF;
				z-index: 999;
				position: absolute;
				left: 50%;
				top: 50%;
				margin-top: -15rem;
				margin-left: -40%;
			}
		
			.item1{
				width: 100%;
				height: 30rem;
				background-color: #8A78FE;
			}
			.btn-click{
				width: 50%;
				padding: 1rem;
				font-size: 1.5rem;
				color: #000000;
				text-align: center;
				background-color: #FFEBCD;
			}
			.item2{
				width: 100%;
				height: 30rem;
				background-color: #FFEBCD;
			}
			.item3{
				width: 100%;
				height: 30rem;
				background-color: #FF5317;
			}
			.item4{
				width: 100%;
				height: 30rem;
				background-color: #199BFF;
			}
			.btn-close{
				width: 15rem;
				height: 5rem;
				line-height: 5rem;
				font-size: 1.5rem;
				color: #000000;
				text-align: center;
				background-color: #8A78FE;
			}

JS代码

$(document).ready(function(){

	$(".btn-click").on("click",function(){
		// 点击出现弹窗事件
		$(".maskLayer,.popup").show();
		// 禁止页面滑动
	    $("body").css("overflow","hidden");
    })
    $(".btn-close,.maskLayer").on("click",function(){
	    // 点击关闭弹窗按钮及遮罩层关闭弹窗事件
	    $(".maskLayer,.popup").hide();
	    // 解除禁止滑动
		$("body").css("overflow","");
	})
});