網上的一些彈出層的控件多了去了，我很久之前用了一個，效果還不錯，但如果應用到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; width: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="width:100%; height:24px; background-color:#6b96f7; float:left"><table width="100%"><tr><td style="width:50%"> 更改口令</td><td style="width: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);