Copy codeThe Code is as follows:
<! 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 logon pop-up window effect </title>
<Script type = "text/javascript" src = "/ajaxjs/jquery-1.6.2.min.js"> </script>
<Script type = "text/javascript" src = "/jscss/demoimg/201310/thickbox_plus.js"> </script>
<Style>
Body {background-color: # fff ;}
Html, body {height: 100% ;}
Html body {font: 12px Arial, Helvetica, sans-serif; color: #333333}
Html> body {font: 12px Arial, Helvetica, sans-serif; color: #333333}
# TB_overlay {position: absolute; top: 0; left: 0; z-index: 100; width: 100%; height: 100%; background-color: # CCC; filter: alpha (opacity = 60);-moz-opacity: 0.6; opacity: 0.6 ;}
# TB_window {top: 0px; left: 0px; position: fixed; _ position: absolute; background: # fff; z-index: 102; color: #000000; display: none; border: 5px solid #666 ;}
# TB_caption {height: 25px; padding: 10px 30px 10px 25px ;}
# TB_closeWindow {height: 25px; padding: 10px 25px 10px 0; float: right ;}
# TB_closeAjaxWindow {padding: 5px 10px 7px 0; margin-bottom: 1px; text-align: right; background-color: # e8e8e8 ;}
# TB_ajaxContent {padding: 2px 15px 15px 15px; overflow: auto ;}
# TB_load {text-align: center; position: absolute; top: 50%; left: 0px; width: 100%; overflow: visible; visibility: visible; display: block; z-index: 101 ;}
# TB_loadContent {margin-left:-125px; position: absolute; top:-50px; left: 50%; width: 250px; height: 100px; visibility: visible ;}
</Style>
</Head>
<Body>
<A href = "/jscss/demoimg/201310/ShowLogin.html? Height = 160; width = 400 "title =" after logging on, You can operate "class =" thickbox "> log on now </a>
</Body>
</Html>
Click the JavaScript pop-up layer. A login layer is displayed. jQuery version 1.6.2. The content in this layer calls an Example page. The principle is based on thickbox_plus.js. thickbox is mostly used to display enlarged images, it is also quite novel here. Please note the file path. The required js files are generally in the jscss/demoimg/201310 directory. You can right-click and save the image on the page.