Js+css jquery Implement page back execution & Matte Bounce Box

JS section

<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 () {      varHashlocation =Location.hash; varHashsplit = Hashlocation.split ("#!/"); varHashname = hashsplit[1]; if(Hashname!== ") {        varhash =Window.location.hash; if(Hash = = "") {          //alert ("Hope this website can provide you with help!") ");$ ('. 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 '));})//Click the Mask section to close the bullet box$ ('. 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 Section

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

<div class= ' Zhezhao ' ></div>        <div  class= ' onunload-box ' style= ' display:none ' >            <p Class= ' P1 ' > and nephrite how to identify? What do you know about Hetian Jade </p>            <p class= ' P2 ' > According to statistics, most people do not know and difficulting how to identify. <br/><br/> Ding Stone experts teach you how to identify and jade small coup </p>            <p class= ' p3 ' > Add Ding Shi and Hetian jade for public friends, experts teach you to appreciate and Hetian Tian </p>            <p class= ' P4 ' ><script>document.write (stxlwx);</script></p> <p class=            ' P5 ' > First long press the above public number direct copy </p>            <div class= ' btns ' >                <div class= ' colsebtn ' > Thank you, I don't need </div>                <a href= "weixin://" ><div class= ' wxgghbtn '  data-clipboard-target= '. P4 ' > Follow the public number and need </div> later </a>        </div>

Js+css jquery Implement page back execution & Matte Bounce Box