弹窗（遮罩层）

html

<div class="item site">
				<a class="switchbtn" href="javascript:void(0);">中国</a>
				<div class="sitepopbox bg05 z-1-99 popbox">
					<div class="sitebox_contain popcontain">
						<div class="tipbox">
							<p class="text1">请选择您所在的区域。</p>
							<p class="text2">请注意，更换您的位置将会清除购物车中的所有商品。</p>
							<a href="javascript:void(0);" class="closebtn"></a>
						</div>
						<div class="contentbox">
							<ul class="sitelist">
								<li><a href="" title="中国大陆">中国大陆</a></li>
								<li><a href="" title="台湾">台湾</a></li>
								<li><a href="" title="香港&澳门">香港&澳门</a></li>
								<li><a href="" title="日本">日本</a></li>
								<li><a href="" title="新加坡&马拉西亚">新加坡&马拉西亚</a></li>
								<li><a href="" title="美国">美国</a></li>
							</ul>
						</div>
					</div>
				</div>
			</div>

　　

 

css

.bg05{background: rgba(0,0,0,0.5);}
.z-1-99{z-index:-1;}
.show.z-1-99{z-index:99;}
.popbox{opacity: 0;transition: all 0.2s ease-in-out;width: 100vw;height: 100vh;position: fixed;top:0;left:0;}
.show.popbox{opacity: 1;}

　　

 

 

 

js

// pc顶部位置弹窗
		$('.Topbox .Topbox_sec1 .site .switchbtn').click(function(){
			$('.Topbox .Topbox_sec1 .site .sitepopbox').addClass('show');
		});
		// pc点击空白区域关闭窗口
		$('.popbox').click(function(e){
		  var _con = $('.popcontain'); 
		  if(!_con.is(e.target) && _con.has(e.target).length === 0){ 
		    $('.popbox').removeClass('show');
		  }
		});
		//pc esc关闭窗口
	    $(document).keyup(function(event){
	        if(event.which=='27'){
	            $('.popbox.show').removeClass('show');
	        }
	    });
	    //PC 点击close按钮关闭弹窗
	    $('.popbox .closebtn').click(function(e){
		    $('.popbox').removeClass('show');
		});