js+css jQuery实现页面后退执行 & 遮罩弹框

<script src="http://libs.baidu.com/jquery/2.0.0/jquery.js"></script><script type="text/javascript"> jQuery(document).ready(function ($) { ?if (window.history && window.history.pushState) { ???$(window).on(‘popstate‘, function () { ?????var hashLocation = location.hash; ?????var hashSplit = hashLocation.split("#!/"); ?????var hashName = hashSplit[1]; ?????if (hashName !== ‘‘) { ???????var hash = window.location.hash; ???????if (hash === ‘‘) { ?????????//alert("希望该网站能提供你帮助！"); ?????????$(‘.onunload-box‘).css(‘display‘, ‘inline‘); ?????????$(‘.zhezhao‘).css(‘display‘, ‘inline‘); ???????} ?????} ???}); ???window.history.pushState(‘forward‘, null, ‘./#forward‘); ?}});$(‘.colsebtn‘).click(function(){ ???$(‘.onunload-box‘).css(‘display‘, ‘none‘); ???$(‘.zhezhao‘).css(‘display‘, ‘none‘);})//点击遮罩部分，关闭弹框$(‘.zhezhao‘).click(function(){ ???$(‘.onunload-box‘).css(‘display‘, ‘none‘); ???$(‘.zhezhao‘).css(‘display‘, ‘none‘);})$(‘.bottom-box‘).click(function(){ ???$(‘.onunload-box‘).css(‘display‘, ‘inline‘); ???$(‘.zhezhao‘).css(‘display‘, ‘inline‘);}); </script>

 ???????.onunload-box{ ???????????width:400px; ???????????height:268px; ???????????border:1px #ad1d1d solid; ???????????border-radius: 20px; ???????????text-align: center; ???????????position: fixed; ???????????top:50%; ???????????margin-top:-134px; ???????????left:50%; ???????????margin-left:-200px; ???????????z-index:9999; ???????????background-color: #fff; ???????????padding:12px 24px 0; ???????????color:#732205; ???????} ???????.btns{ ???????????height:100px; ???????????width:100%; ???????????border-top:1px #ad1d1d solid; ???????????position: absolute; ???????????bottom:-50px; ???????????left:0; ???????} ???????.colsebtn{ ???????????width:150px; ???????????float:left; ???????????line-height: 50px; ???????????cursor:pointer; ????????} ???????.wxgghbtn{ ???????????width:256px; ???????????height:50%; ???????????line-height: 50px; ???????????position:absolute; ???????????right:0; ???????????background-color:#ad1d1d; ???????????color:#fff; ???????????border-bottom-right-radius: 20px; ???????} ???????.wxgghbtn>a{text-decoration: none;color:#fff;} ???????.p1{font-size:16px;margin-top:0} ???????.p2{font-size:14px;color:#333;margin:0px;} ???????.p4{font-size:32px;font-weight: bold;margin:0px;} ???????.zhezhao ?????????{ ??????????width:100%; ??????????height:100%; ??????????background-color:#000; ??????????filter:alpha(opacity=60); ??????????-moz-opacity:0.6; ??????????opacity:0.6; ??????????position:absolute; ??????????left:0px; ??????????top:0px; ??????????display:none; ??????????z-index:999; ?????????} 

<div class=‘zhezhao‘></div> ???????<div ?class=‘onunload-box‘ style=‘display:none‘> ???????????<p class=‘p1‘>和田玉怎么鉴定的？你知道的和田玉是什么样的</p> ???????????<p class=‘p2‘>据统计，大部分的人都不知道和田玉石如何鉴定的。<br/><br/>鼎石专家教你如何鉴定和田玉小妙招</p> ???????????<p class=‘p3‘>添加鼎石和田玉为公众号好友，专家教您鉴赏和田玉</p> ???????????<p class=‘p4‘><script>document.write(stxlwx);</script></p> ???????????<p class=‘p5‘>先长按上方公众号直接复制</p> ???????????<div class=‘btns‘> ???????????????<div class=‘colsebtn‘>谢谢，我不需要</div> ???????????????<a href="weixin://"><div class=‘wxgghbtn‘ ?data-clipboard-target=‘.p4‘>关注微信公众号，以后用得着</div></a> ???????</div>