页面设计层部分：
样式定义：
<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;" οnclick="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>
页面JS元素：
<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");
}
