In the javascript pop-up layer, the WeChat scan instance is displayed.

A more practical testing of the javascript pop-up layer pop-up scan, I hope it will be helpful to all of you.

Js click a button to bring up a layer and cover the content behind the page to make it translucent. This effect is widely used, for example, the pop-up layer during Forum login and sign-in, for example, the pop-up layer when you click a button. This effect is as follows:

Source code of the js pop-up layer:

The Code is as follows:

Copy code

<! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <Html xmlns = "http://www.w3.org/1999/xhtml"> <Head> <Meta http-equiv = "Content-Type" content = "text/html; charset = UTF-8"/> <Title> js pop-up layer and js cover layer </title> <Style type = "text/css"> . Weixindiag {position: absolute; height: auto; z-index: 90001; padding: 1px; display: none; width: 235px; background-color: none ;} . Weixindiag img {border-radius: 5px ;} . Weixinclose {background: url (http://www.daixiaorui.com/Public/images/weixinclose.png) no-repeat; width: 38px; height: 38px; display: inline-block; margin-bottom:-50px; cursor: pointer; margin-bottom:-38px; z-index: 999; position: absolute; right:-18px; top:-18px ;} . Overlay {background-color: #252525; position: absolute; z-index: 90000; left: 0; top: 0; width: 100%; height: 100%; opacity: 0.7; filter: alpha (opacity = 70);-moz-opacity: 0.5; display: none ;} </Style> <! -- Don't forget to introduce the jquery library. --> <Script type = "text/javascript" src = "http://www.daixiaorui.com/Public/js/jquery.min.js"> </script> <Script type = "text/javascript"> // $ (Function (){ $ (". Weixin"). click (function (){ $ (". Overlay" mirror.css ({display: "block", height: $ (document). height ()}); $ (". Weixindiag" ).css ({ Left :( $ ("body"). width ()-$ (". weixindiag"). width ()/2 + "px ", Top :( $ (window). height ()-$ (". weixindiag"). height ()/2 + $ (window). scrollTop () + "px ", Display: "block" }); });   $ (". Weixinclose"). click (function (){ $ (". Overlay,. weixindiag" ).css ("display", "none "); Return false; }); }) </Script> </Head>   <Body> <Div class = "overlay"> </div> <Div class = "weixindiag"> <a class = "weixinclose"> </a> </div> <Script type = "text/javascript"> // Just for full screen For (I = 0; I <1000; I ++ ){ Document. write ('<a href = "#" class = "weixin"> follow </a> @ daixiaorui.com '); } </Script> </Body> </Html>