页面灰框模式精彩实现

点击页面按钮后，弹出对话框，原页面变为灰色不可编辑模式，实现原理：JS+CSS+DIV，DIV的位置可以设置为最上层，然后用CSS对该DIV的样式进行控制，最后JS代码可以控制DIV的显示时机，这样的组合就可以实现页面灰框模式。那么灰框会的弹出对话框显示的内容，比如像一个新页面的形式显示具体的数据，实际并不是一个新的页面，仅仅只是在本页面已经布局好的内容显示框，JS代码在控制显示时，改变该ＤIV的style.display属性便可控制其是否显示，那么这些对话框的数据是在触发此事件前已经绑定好，该事件的触发仅仅只是让其显示。因为客户端事件通常都会比服务器端的事件先执行，所以，如果在触发该事件的同时再去绑定数据，那么页面上将不会显示数据，所以在选择该数据时，通常有一个二级选择来达到这个目的，具体可以参考一下火狐应用中心的账族免费记账里面的应用，它采用的编辑方式是一个二级编辑方式。

瞅瞅代码：

<head>----------javascript

<%--javascript控制两层显示与否--%>

//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 };

}

</script>

==============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; 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;

780px; z-index: 1001; position: absolute; display: none; top: 50%; left: 50%;

margin: -200px 0 0 -400px;">

<br />

<div>

<asp:Label ID="TxtUserID" runat="server" Text="Label"></asp:Label>

<asp:Label ID="TxtUserName" runat="server" Text="Label"></asp:Label>

</div>

<br />

<div>

<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 />

<asp:Button ID="btnConfirm" runat="server" Text=" 确定 " OnClick="btnConfirm_Click"

CssClass="cmdField" />

</div>

<br />

</div>

</body>