网上的一些弹出层的控件多了去了，我很久之前用了一个，效果还不错，但如果应用到ASP.NET的话，会出现“弹出层内的控件runat='server'失效”的情况，具体情况我也不太会描述，但就是那些onclick、onchange事件全部没用。弹出来的层上面的控件是一个新的控件了，上面啥也木有，或许只能自己再写一些ajax之类的方法来把数据提交给后台了。下面呢，我介绍一种2年前我就使用的办法，上网抄人家的，现在也不知道在哪抄的了。今天才刚完善了一些。下面先贴出它原来的样子子吧：
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="index.aspx.cs" Inherits="KBTelSystem.index" %> <!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 id="Head1" runat="server"> <link href="css/style.css" rel="stylesheet" type="text/css" /> <title>电话查询 - 后台管理</title> </head> <body> <form id="form1" runat="server"> <div style="text-align:right; 1024px"> <a href="javascript:void(0);" onclick="openBg(1);openSelect('selectItem',1)">更改口令</a> </div> <div id="bg"></div> <div class="hidden" id="selectItem"> <div style="100%; height:24px; background-color:#6b96f7; float:left"><table width="100%"><tr><td style="50%"> 更改口令</td><td style="50%" align="right"><img src="images/关闭.bmp" onclick="openBg(0);openSelect('selectItem',0)" onmousemove="this.src='images/关闭2.bmp'" onmouseout="this.src='images/关闭.bmp'" title="点击关闭" /></td></tr></table></DIV> <table width="600" border="0" align="left" cellpadding="2" cellspacing="0"> <tr> <td width="240" height="16" align="right"> </td> <td align="right"></td> </tr> <tr> <td width="240" height="34" align="right"> <asp:Label ID="Label13" runat="server" Text="旧密码"></asp:Label> <asp:TextBox ID="tbOldPwd" runat="server" TextMode="Password" Width="148px"></asp:TextBox></td> <td align="right"><asp:Label ID="Label14" runat="server" Text="新密码"></asp:Label> <asp:TextBox ID="tbNewPwd" runat="server" TextMode="Password" Width="148px"></asp:TextBox></td> </tr> <tr> <td width="240" height="34" align="right"><asp:Label ID="Label15" runat="server" Text="确认密码"></asp:Label> <asp:TextBox ID="tbNewPwd1" runat="server" TextMode="Password" Width="148px"></asp:TextBox></td> <td align="right"> <asp:Button ID="btnAlertPwd" runat="server" OnClick="btnAlertPwd_Click" Text="保 存" Width="65px"/> </td> </tr> <tr> <td width="240" height="8"></td> <td></td> </tr> </table> </div> </form> <script type="text/javascript"> var grow = $("selectSub").getElementsByTagName("option").length; //组数 var showGrow = 0;//已打开组 var selectCount = 0; //已选数量 showSelect(showGrow); var items = $("selectSub").getElementsByTagName("input"); //alert(maxItem); //var lenMax = 2; //alert(1); function $(o){ //获取对象 if(typeof(o) == "string") return document.getElementById(o); return o; } function openBg(state){ //遮照打开关闭控制 if(state == 1) { $("bg").style.display = "block"; var h = document.body.offsetHeight > document.documentElement.offsetHeight ? document.body.offsetHeight : document.documentElement.offsetHeight; //alert(document.body.offsetHeight); //alert(document.documentElement.offsetHeight); $("bg").style.height = h + "px"; } else { $("bg").style.display = "none"; } } function openSelect(id,state){ //选择层关闭打开控制 if(state == 1) { $(id).style.display = "block"; $(id).style.left = ($("bg").offsetWidth - $(id).offsetWidth)/2 + "px"; $(id).style.top = document.body.scrollTop + 100 + "px"; } else { $(id).style.display = "none"; } } </script> </body> </html>
仔细看看上面的代码，你会发现其中有一段：
function $(o){ //获取对象 if(typeof(o) == "string") return document.getElementById(o); return o; }
它这样做有一个坏处，如果你要引用jquery的话，呵呵，jquery代码都失败了，所以你想写一些javascript验证的代码的话，还不能用jquery，郁闷死了，所以，就有了这一篇文章，我把它改成兼容jquery的，如下：
<script type="text/javascript">
function openBg(state) { //遮照打开关闭控制
if (state == 1) {
//设置遮罩层的高度
var h = document.body.offsetHeight > document.documentElement.offsetHeight ? document.body.offsetHeight : document.documentElement.offsetHeight;
$("#bg").css("height", h + "px");
$("#bg").show();
}
else {
$("#bg").hide();
}
}
function openSelect(id, state) { //选择层打开关闭控制
if (state == 1) {
var showDiv = $("#" + id).css("width").replace('px', '');
var bgDiv = $("#bg").css("width").replace('px', '');
$("#" + id).css("margin-left", (bgDiv - showDiv) / 2 + "px"); //弹出的层可以横向居中显示
$("#" + id).css("margin-top", "100px"); //至于顶部，固定一个值就OK啦
$("#" + id).show();
}
else {
$("#" + id).hide();
}
}
</script>
至于调用的办法，还是跟原文一样。
openBg(1);openSelect('selectItem',1);