页面灰框模式精彩实现
点击页面按钮后，弹出对话框，原页面变为灰色不可编辑模式，实现原理：JS+CSS+DIV，DIV的位置可以设置为最上层，然后用CSS对该DIV的样式进行控制，最后JS代码可以控制DIV的显示时机，这样的组合就可以实现页面灰框模式。那么灰框会的弹出对话框显示的内容，比如像一个新页面的形式显示具体的数据，实际并不是一个新的页面，仅仅只是在本页面已经布局好的内容显示框，JS代码在控制显示时，改变该ＤIV的style.display属性便可控制其是否显示，那么这些对话框的数据是在触发此事件前已经绑定好，该事件的触发仅仅只是让其显示。因为客户端事件通常都会比服务器端的事件先执行，所以，如果在触发该事件的同时再去绑定数据，那么页面上将不会显示数据，所以在选择该数据时，通常有一个二级选择来达到这个目的，具体可以参考一下火狐应用中心的账族免费记账里面的应用，它采用的编辑方式是一个二级编辑方式。
瞅瞅代码：
<head>----------javascript
<%--javascript控制两层显示与否--%>
//javascript控制两层显示与否
<script type="text/javascript">
function ShowNo() {
document.getElementById("doing").style.display = "none";
document.getElementById("divLogin").style.display = "none";
}
function $(id) {
return (document.getElementById) ? document.getElementById(id) : document.all[id];
}
function showFloat() {
var range = getRange();
$('doing').style.width = range.width + "px";
$('doing').style.height = range.height + "px";
$('doing').style.display = "block";
document.getElementById("divLogin").style.display = "";
}
function getRange() {
var top = document.body.scrollTop;
var left = document.body.scrollLeft;
var height = document.body.clientHeight;
var width = document.body.clientWidth;
if (top == 0 && left == 0 && height == 0 && width == 0) {
top = document.documentElement.scrollTop;
left = document.documentElement.scrollLeft;
height = document.documentElement.clientHeight;
width = document.documentElement.clientWidth;
}
return { top: top, left: left, height: height, width: width };
}
</script>
==============CSS
<style type="text/css">
body
{
margin: 0px;
}
</style>
</head>
<body>
===============DIV
<!--加一个半透明层-->
<div id="doing" style="filter: alpha(opacity=30); -moz-opacity: 0.3; opacity: 0.3;
background-color: #000; width: 100%; height: 100%; z-index: 1000; position: absolute;
left: 0; top: 0; display: none; overflow: hidden;">
</div>
<!--加一个登录层-->
<div id="divLogin" style="border: solid 10px #898989; background: #fff; padding: 10px;
width: 780px; z-index: 1001; position: absolute; display: none; top: 50%; left: 50%;
margin: -200px 0 0 -400px;">
<div style="padding: 3px 15px 3px 15px; text-align: left; vertical-align: middle;">
<br />
<br />
<br />
<div>
<span class="style16">学号：</span>
<asp:Label ID="TxtUserID" runat="server" Text="Label"></asp:Label>
<span class="style16">姓名：</span>
<asp:Label ID="TxtUserName" runat="server" Text="Label"></asp:Label>
</div>
<br />
<div>
<span class="style16">密码：</span>
<asp:TextBox ID="TxtUserPwd" runat="server" CssClass="input"> </asp:TextBox>
<span class="style16">考试剩余时间：</span>
<asp:Label ID="TextBoxRemainTime" runat="server" Text="Label"></asp:Label>
</div>
<br />
<div>
<span class="style16">试卷提交状态：</span>
<asp:DropDownList ID="DropDownListState" runat="server" CssClass="input">
<asp:ListItem Value="0">未提交</asp:ListItem>
<asp:ListItem Value="1">已提交</asp:ListItem>
</asp:DropDownList>
<span class="style16">是否要换机考试：</span>
<asp:DropDownList ID="DropDownListChangeSeat" runat="server" CssClass="input">
<asp:ListItem Value="0" Selected="True">否</asp:ListItem>
<asp:ListItem Value="1">是</asp:ListItem>
</asp:DropDownList>
</div>
<br />
<div align="center">
<asp:Button ID="btnConfirm" runat="server" Text=" 确 定 " OnClick="btnConfirm_Click"
CssClass="cmdField" />
<input id="BttCancel" type="button" value=" 取 消 " onclick="ShowNo()" class="cmdField" />
</div>
</div>
<br />
</div>
</body>
不学则无术
