js+Jquery 弹出DIV层

  这个效果在项目开始的时候就做了   也是从网上找的资料   比较简单   写出来与大家共享一下

 

  首先需要把Jquery的文件引用进来  

 

  其次给div加上样式 :

 

   #backgroundPopup{ display:none; position:fixed; _position:absolute; /* hack for internet explorer 6*/ height:100%; width:100%; top:0; left:0; background:#CFD0D1; border:1px solid #cecece; z-index:1; } #popupContact{ display:none; position:fixed; _position:absolute; /* hack for internet explorer 6*/ background:#FFFFFF; border:1px solid #cecece; z-index:2; padding:1px; font-size:13px; } #popupContactClose{ font-size:12px; line-height:14px; right:7px; top:10px; position:absolute; color:#000000; font-weight:700; display:block; cursor:hand; }    

 

 

  显示层代码如下:

 

  <body> <form id="form1" runat="server"> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <input type="button" onclick="showdiv()" value="弹出层" /> <div id="popupContact" style="position:absolute;" mce_style="position:absolute;"> <a id="popupContactClose">关闭</a> <table> <tr> <td bgcolor="#759ac4" height="26"> <table align="center" border="0" cellpadding="0" cellspacing="0" width="550"> <tr> <td class="word03" height="18" valign="bottom" width="140"> 用户信息维护</td> <td class="word03" valign="bottom" width="240"> </td> <td class="word03" valign="bottom" width="320"> </td> <td class="word03" valign="bottom" width="80"> </td> </tr> </table> </td> </tr> <tr> <td> <table align="center" border="0" cellpadding="0" cellspacing="0" width="550"> <tr> <td height="1"> </td> </tr> <tr> <td bgcolor="#f0f0f0" height="40"> <table align="center" border="0" cellpadding="0" cellspacing="0" width="550"> <tr> <td class="word01-2" width="100"> 用户名称</td> <td width="670"> <label> <input id="txtName" runat="server" name="txtName" style="width: 235px" type="text" /> </label> </td> </tr> </table> </td> </tr> <tr> <td height="1"> </td> </tr> <tr> <td bgcolor="#f0f0f0" height="40"> <table align="center" border="0" cellpadding="0" cellspacing="0" width="550"> <tr> <td class="word01-2" width="100"> 输入密码</td> <td width="670"> <label> <input id="txtPass" runat="server" name="txtPass" style="width: 235px" type="password" /> </label> </td> </tr> </table> </td> </tr> <tr> <td height="1"> </td> </tr> <tr> <td bgcolor="#f0f0f0" height="40"> <table align="center" border="0" cellpadding="0" cellspacing="0" width="550"> <tr> <td class="word01-2" style="height: 24px" width="100"> 确认密码</td> <td style="height: 24px" width="670"> <label> <input id="txtOkPass" runat="server" name="txtOkPass" style="width: 235px" type="password" /> </label> </td> </tr> </table> </td> </tr> <tr> <td height="62" bgcolor="#f0f0f0"> <table align="center" border="0" cellpadding="0" cellspacing="0"> <tr> <td> <div> <asp:Button ID="Button1" style="float:left" mce_style="float:left" runat="server" OnClientClick="return AddUser();" Text=" 添 加 " /> </div> </td> </tr> </table> </td> </tr> </table> </td> </tr> </table> </div> <div id="backgroundPopup"></div> </form> </body> 

 

  js代码和Jquery代码都不是很多  如下:

 

 // JScript 文件 var popupStatus = 0; //使用Jquery加载弹窗 function loadPopup() { //仅在开启标志popupStatus为0的情况下加载 if(popupStatus==0){ $("#backgroundPopup").css({ "opacity": "0.7" }); $("#backgroundPopup").fadeIn("slow"); $("#popupContact").fadeIn("slow"); popupStatus = 1; } } //使用Jquery去除弹窗效果 function disablePopup() { //仅在开启标志popupStatus为1的情况下去除 if(popupStatus==1){ $("#backgroundPopup").fadeOut("slow"); $("#popupContact").fadeOut("slow"); popupStatus = 0; } } //将弹出窗口定位在屏幕的中央 function centerPopup(){ var sWidth;var sHeight; sWidth=window.screen.availWidth; sHeight = document.body.scrollHeight; var popupHeight = $("#popupContact").height(); var popupWidth = $("#popupContact").width(); //居中设置 $("#popupContact").css({ "position": "absolute", "top": sHeight/2-popupHeight/2, "left": sWidth/2-popupWidth/2 }); //以下代码仅在IE6下有效 $("#backgroundPopup").css({ "height": window.screen.availHeight, "width":window.screen.availWidth }); } $(document).ready(function(){ //关闭层 $("#popupContactClose").click(function(){ disablePopup(); }); //键盘按下ESC时关闭窗口! $(document).keypress(function(e){ if(e.keyCode==27 && popupStatus==1){ disablePopup(); } }); }); function showdiv()//调用事件 { centerPopup(); loadPopup(); } 

 

  效果如图:

 

 

 

 

  js+Jquery 弹出DIV层_第1张图片

 

  点击关闭后还有有一个渐变的过程

 

  当然   更完整的更简单的代码来自http://www.code52.net/page/JS/js200811_26_225.html    我只是从这里稍稍做了一些改变变成自己项目能够用到的了

你可能感兴趣的:(jquery,function,server,table,Class,border)