JS部分

<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>

CSS部分

        .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; 
         } 

HTML部分

<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>

js+css jQuery實現頁面後退執行 & 遮罩彈框