弹出层来完成页面交互操作

<mce:style type="text/css"><!--
html
{
height: 100%;
}
body
{
margin: 0px;
padding: 0px;
height: 100%;
line-height: 25px;
}
div#mbDIV
{
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
background-color: #AAAAAA;
z-index: 10;
filter: alpha(opacity=80);
opacity: 0.8;
}
div#divType
{
position: absolute;
width: 500px;
height: 150px; /*background-color: #ffffff;*/
z-index: 20;
}
div#divTitleType
{
width: 100%;
height: 20px;
background-color: #FF0000;
cursor: move;
}
#zindexDiv
{
z-index: 99;
}
.tab
{
border: solid 2px red;
}

--></mce:style><style type="text/css" mce_bogus="1">        html
{
height: 100%;
}
body
{
margin: 0px;
padding: 0px;
height: 100%;
line-height: 25px;
}
div#mbDIV
{
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
background-color: #AAAAAA;
z-index: 10;
filter: alpha(opacity=80);
opacity: 0.8;
}
div#divType
{
position: absolute;
width: 500px;
height: 150px; /*background-color: #ffffff;*/
z-index: 20;
}
div#divTitleType
{
width: 100%;
height: 20px;
background-color: #FF0000;
cursor: move;
}
#zindexDiv
{
z-index: 99;
}
.tab
{
border: solid 2px red;
}

</style>

<div id="mbDIV" style="display: none;" mce_style="display: none;">
</div>
<div id="divType" style="top: 200px; left: 300px; display: none;">
<div id="divTitleType">
<table width="100%">
<tr>
<td align="left">
<asp:Label ID="lblMsg" runat="server" Text="添加"></asp:Label><asp:Label ID="lblID" runat="server" Text="" Visible=false></asp:Label>
</td>
<td align="center">
<asp:LinkButton ID="lkbSub" runat="server" Text="确认" OnClick="lkbSubClick"></asp:LinkButton>
</td>
<td align="right">
<span style="cursor: pointer;" mce_style="cursor: pointer;" onclick="closediv('divType');">关闭</span>
</td>
</tr>
</table>
</div>
<div style="background-color: White;" mce_style="background-color: White;">
<table width="100%">
<tr>
<td>
父类：<asp:DropDownList ID="ddlRoot" runat="server">
</asp:DropDownList>
</td>
</tr>
<tr>
<td>
名称：<asp:TextBox ID="txtName" runat="server"></asp:TextBox><asp:RequiredFieldValidator
ID="RequiredFieldValidator1" runat="server" ErrorMessage="*" ControlToValidate="txtName"></asp:RequiredFieldValidator>
</td>
</tr>
<tr>
<td>
助记：<asp:TextBox ID="txtShort" runat="server"></asp:TextBox>
</td>
</tr>
</table>
</div>
</div>

<mce:script type="text/javascript"><!--

function getPosition() {
var top    = document.body.scrollTop;
var left   = document.body.scrollLeft;
var height = document.body.offsetHeight;
var width  = document.body.offsetWidth;
return {top:top,left:left,height:height,width:width};
}

function show(ele)
{
eval(ele + ".style.display = ''");
}
function hidden(ele)
{
eval(ele + ".style.display = 'none'");
}

function setdiv(divname)
{
var Position = getPosition();
var div=document.getElementById(divname);
var divheight=div.currentStyle.height;
var divwidth=div.currentStyle.width;
divheight=divheight.substring(0,divheight.length-2);
divwidth=divwidth.substring(0,divwidth.length-2);

var divtop=((Position.height-divheight)/2)-50;
var divleft=(Position.width-divwidth)/2;
div.style.top = divtop+ "px";
div.style.left = divleft+ "px";
show(divname);
show("mbDIV")
}

function closediv(divname)
{
hidden(divname);
hidden("mbDIV");
}

function getScrollTop() {
var scrollPos = 0;
if (typeof window.pageYOffset != 'undefined') {
scrollPos = window.pageYOffset;
}
else if (typeof window.document.compatMode != 'undefined' &&
window.document.compatMode != 'BackCompat') {
scrollPos = window.document.documentElement.scrollTop;
}
else if (typeof window.document.body != 'undefined') {
scrollPos = window.document.body.scrollTop;
}
return scrollPos;
}

function getScrollLeft() {
var scrollPos = 0;
if (typeof window.pageYOffset != 'undefined') {
scrollPos = window.pageXOffset;
}
else if (typeof window.document.compatMode != 'undefined' &&
window.document.compatMode != 'BackCompat') {
scrollPos = window.document.documentElement.scrollLeft;
}
else if (typeof window.document.body != 'undefined') {
scrollPos = window.document.body.scrollLeft;
}
return scrollPos;
}

var Position = getPosition();
window.onscroll = function ()
{
mbDIV.style.top  =getScrollTop();
mbDIV.style.left=getScrollLeft();
};

// --></mce:script>

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

#region 层操作

private void printJs(string divname)
{
string str = "<mce:script type="text/javascript"><!--
/r/n"
+ "setdiv(/"" + divname + "/"); /r/n"
+ " var div=document.getElementById(/"" + divname + "/"); /r/n"
+ " div.onmousedown = Down; /r/n"
+ "var tHeight,lWidth; /r/n"
+ "function Down(e)  /r/n"
+ "{  /r/n"
+ "  var event = window.event || e;  /r/n"
+ "  tHeight = event.clientY  - parseInt(div.style.top.replace(/px/,/"/"));  /r/n"
+ "lWidth  = event.clientX - parseInt(div.style.left.replace(/px/,/"/"));  /r/n"
+ "  document.onmousemove = Move;  /r/n"
+ " document.onmouseup   = Up;  /r/n"
+ "}  /r/n"
+ "function Move(e) {  /r/n"
+ "  var event = window.event || e;  /r/n"
+ "var top = event.clientY - tHeight;  /r/n"
+ "var left = event.clientX - lWidth;  /r/n"
+ "//判断 top 和 left 是否超出边界  /r/n"
+ "top = top < 0 ? 0 : top;  /r/n"
+ "top = top > document.body.offsetHeight - 150 ? document.body.offsetHeight - 150 : top;  /r/n"
+ "left = left < 0 ? 0 : left;  /r/n"
+ "left = left > document.body.offsetWidth - 300 ? document.body.offsetWidth - 300 : left;  /r/n"
+ "div.style.top  = top + /"px/";  /r/n"
+ "div.style.left = left +/"px/";  /r/n"
+ "}  /r/n"
+ "function Up() {  /r/n"
+ "  document.onmousemove = null;  /r/n"
+ "}"
+ "
// --></mce:script>";

lblJs.Text = str;
}

private void closeJs(string divname)
{
string str = "<mce:script type="text/javascript"><!--
closediv(/"" + divname + "/");
// --></mce:script>";
lblJs.Text = str;
}

#endregion

protected void lkbAdd_Click(object sender, EventArgs e)
{
printJs("divType");

}

protected void lkbSubClick(object sender, EventArgs e)
{
closeJs("divType");
}