Jquery implements the pop-up Layer Effect instance, and jquery implements the pop-up instance
This article describes how jquery achieves the pop-up layer effect. Share it with you for your reference. The specific implementation method is as follows:
<Head runat = "server"> <title> jQuery pop-up layer </title> <script type = "text/javascript" src = "js/jquery-1.3.2-min.js"> </script> <script type = "text/javascript" >$ (function () {$ ("# btnShow "). click (function () {// var str = ""; // $ (". form "example .html (str); $ (" # BgDiv "example .css ({display:" block ", height: $ (document ). height ()}); var yscroll = document.doc umentElement. scrollTop; $ ("# DialogDiv" ).css ("top", "100px"); $ (" # DialogDiv ").css (" display "," block "); document.doc umentElement. scrollTop = 0 ;}); $ ("# btnClose "). click (function () {$ ("# BgDiv" ).css ("display", "none"); $ ("# DialogDiv" ).css ("display ", "none") ;}); </script> <style type = "text/css"> body, h2 {margin: 0; padding: 0 ;} # BgDiv {background-color: # e3e3e3; position: absolute; z-index: 99; left: 0; top: 0; display: none; width: 100%; height: 1000px; op Acity: 0.5; filter: alpha (opacity = 50);-moz-opacity: 0.5 ;}# DialogDiv {position: absolute; width: 400px; left: 50%; top: 50%; margin-left:-200px; height: auto; z-index: 100; background-color: # fff; border: 1px #8FA4F5 solid; padding: 1px ;} # DialogDiv h2 {height: 25px; font-size: 14px; background-color: #8FA4F5; position: relative; padding-left: 10px; line-height: 25px ;} # DialogDiv h2 a {pos Ition: absolute; right: 5px; font-size: 12px; color: #000000 ;}# DialogDiv. form {padding: 10px ;} </style>
I hope this article will help you with jQuery programming.