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

Posted 2020-12-28 `早先少年时

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>