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');
});