jquery Popup Mask Layer Instance program code

Features: Small amount of code, simple and easy to use. No formatting restrictions, random code padding. Discard full compatibility under IE6/7/8 (opaque background), only to ensure that the content of the information can be read normally.

Disadvantage: Given the effect on the touchscreen phone, no response to the scroll event is added, or you may never see the pop-up content (the scaling of the page will affect the ScrollTop value).

The relevant plug-ins are either too powerful or bulky, or they are in a fixed format that requires preset headings, content, button closures, and so on. Non-fixed style and very flexible for a while did not find, the hand of a bug in the original JavaScript pop-up layer changed, with jquery around the problem of compatibility problems, just now every project is using jquery, the final effect can be used or. Better implementation methods and can be compatible with mobile phone methods also hope to have a lot of guidance, found that there are problems also please criticize.

Html

The code is as follows

Copy Code

<div id= "Background" ></div> <div id= "Content" > This can be a random label, random content-mming </div> <input id= "btn" type= "button" value= "Dot Me"/>css #background {position:absolute; z-index:998; top:0px; left:0px; Background:rgb (50,50,50); Background:rgba (0,0,0,0.5) ; Display:none;} #content {position:absolute; width:500px; z-index:999; padding:10px; background: #fff; border-radius:5px; display:none ;} Jquery $ (function () { function Conposition () { var obackground = document.getElementById ("background"); var DW = $ (document). width (); var DH = $ (document). Height (); OBackground.style.width = dw+ ' px '; OBackground.style.height = dh+ ' px '; var ocontent = document.getElementById ("content"); var scrolltop = Document.documentElement.scrollTop | | Document.body.scrollTop; var L = (document.documentelement.clientwidth-ocontent.offsetwidth)/2; var t = ((document.documentelement.clientheight-ocontent.offsetheight)/2) + scrolltop; OContent.style.left = l + ' px '; OContent.style.top = t + ' px '; } $ ("#btn"). Click (function () { $ ("#background, #content"). Show (); Conposition (); }); $ ("#background"). Click (function () {$ (#background, #content). Hide ();}; Click on the black background to hide the pop-up layer, of course, can be bound to any one button $ (window). Resize (function () {conposition ();}); $ (window). Scroll (function () {conposition ();}); Open content to follow the vertical scroll bar (horizontal scroll bar to deal with more problems, for the time being not considered) });

Full Instance

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 "> <meta http-equiv= "Content-type" content= "text/html; Charset=utf-8 "/> <title> Simple jquery pop-up mask layer demo-mming front-end blog </title> <meta name= "keywords" content= "jquery pop-up layer, jquery mask layer"/> <meta name= "description" content= Features: Small amount of code, easy to use. No formatting restrictions, random code padding. The complete compatibility under IE6/7/8 is discarded, only the information content is guaranteed to be displayed properly. "/> <style type= "Text/css" > * {margin:0; padding:0;} body {font-size:12px; color: #222; font-family:verdana,arial,helvetica,sans-serif; background: #f0f0f0;} . clearfix:after {content: "."; display:block; height:0; clear:both; visibility:hidden;} . clearfix {Zoom:1} Ul,li {list-style:none;} img {border:0;} . wrapper {width:600px; margin:0 auto; padding-bottom:50px;} . ad {width:468px; margin:10px auto 0;} . ad li {padding-top:5px;} h1 {height:50px; line-height:50px font-size:22px; font-weight:normal; font-family: "Microsoft Yahei", SimHei;} . download {display:inline-block; height:34px; line-height:34px; padding:0 10px; Background: #333; font-size:14px; Font-weight:bold; Text-align:center; Color: #fff; border:1px solid #999; margin-top:10px;} . fenxiang {height:16px; padding:20px 0 10px; margin-bottom:10px;} . shuoming {margin-top:20px; border:1px solid #ccc; padding-bottom:10px;} . shuoming DT {height:30px; line-height:30px; font-weight:bold; text-indent:10px;} . shuoming dd {line-height:20px; padding:5px 20px;} . Tongji {Display:none} . wrapper {width:600px} #background {position:absolute; z-index:998; top:0px; left:0px; Background:rgb (50,50,50); Background:rgba (0,0,0,0.5) ; Display:none;} #content {position:absolute; width:500px; z-index:999; padding:10px; background: #fff; border-radius:5px; display:none ;} </style> <script type= "Text/javascript" src= "Https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js" >< /script> <script type= "Text/javascript" > $ (function () { function Conposition () { var obackground = document.getElementById ("background"); var DW = $ (document). width (); var DH = $ (document). Height (); OBackground.style.width = dw+ ' px '; OBackground.style.height = dh+ ' px '; var ocontent = document.getElementById ("content"); var scrolltop = Document.documentElement.scrollTop | | Document.body.scrollTop; var L = (document.documentelement.clientwidth-ocontent.offsetwidth)/2; var t = ((document.documentelement.clientheight-ocontent.offsetheight)/2) + scrolltop; OContent.style.left = l + ' px '; OContent.style.top = t + ' px '; } $ ("#btn"). Click (function () { $ ("#background, #content"). Show (); Conposition (); }); $ ("#background"). Click (function () {$ (#background, #content). Hide ();}; $ (window). Resize (function () {conposition ();}); $ (window). Scroll (function () {conposition ();}); }); </script> <body> <div id= "Background" ></div> <div id= "Content" > This can be a random label, random content-mming </div> <div class= "wrapper" > <input id= "btn" type= "button" value= "Dot Me"/> </div> </body>