js+Jquery 弹出DIV层

最新推荐文章于 2019-07-21 17:47:00 发布

jiangyu912

最新推荐文章于 2019-07-21 17:47:00 发布

阅读量6.5k

点赞数

分类专栏：源码类文章标签： jquery border function table class server

本文链接：https://blog.csdn.net/jiangyu912/article/details/4532414

版权

源码类专栏收录该内容

58 篇文章 2 订阅

订阅专栏

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

首先需要把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" οnclick="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(); }

效果如图：

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

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

jiangyu912

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
4
评论
js+Jquery 弹出DIV层

这个效果在项目开始的时候就做了也是从网上找的资料比较简单写出来与大家共享一下首先需要把Jquery的文件引用进来其次给div加上样式： #backgroundPopup{ display:none; position:fixed; _position:absolute; /* hack for i
复制链接

扫一扫

专栏目录