原先的系统是【增加】【更新】操作时直接在Repeater下面控制一个Div的显示与隐藏实现的.现在客户要求弹出的形式修改。
由于考虑到弹出Windows窗体对系统变更很大几乎重写了(窗口之间的传值也不是很方便)。所以考虑实现点击【增加】【更新】时把原先的Div弹出到屏幕中间。
但是由很多问题：
Div不能遮盖后面的DropDownList，我使用<div id="divCon" class ="divCon" runat ="server" visible ="false">
<iframe class ="iFram"></iframe>遮挡了，但是在这里面的布局很难调整。比如我放一个表格在里面，一直不能居中。
麻烦大家帮想想办法...有什么号的方法可以实现客户的要求...
现在我用的都是服务器端的控件...最好是通过实现操作服务器端的控件的方法实现的.谢谢...
由于考虑到弹出Windows窗体对系统变更很大几乎重写了(窗口之间的传值也不是很方便)。所以考虑实现点击【增加】【更新】时把原先的Div弹出到屏幕中间。
但是由很多问题：
Div不能遮盖后面的DropDownList，我使用<div id="divCon" class ="divCon" runat ="server" visible ="false">
<iframe class ="iFram"></iframe>遮挡了，但是在这里面的布局很难调整。比如我放一个表格在里面，一直不能居中。
麻烦大家帮想想办法...有什么号的方法可以实现客户的要求...
现在我用的都是服务器端的控件...最好是通过实现操作服务器端的控件的方法实现的.谢谢...
<!-- saved from url=file://C:/Documents and Settings/yfq/桌面/a.html -->
<script>
window.onerror = new Function("return(false);")
</script><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"><HTML style="OVERFLOW-Y: auto; OVERFLOW-X: hidden; OVERFLOW: hidden"><HEAD>
<STYLE>
/* container */
body {margin:0; padding:0; text-align:center; font-family:Verdana,"宋体"; font-size:12px; color:#333;}
form,ul,ol,li,dl,dt,dd {margin:0; padding:0;}
div{text-align:center; margin:0 auto; padding:0;}
input{color:#333; font-size:12px; font-family:Arial;}
ul,li{list-style:none;}
img,a img {border-width:0;}
/* opennav */
.navigator_bg{position:absolute; width:100%; height:1000px; background-color:#234f74; filter:alpha(opacity=40); -moz-opacity:0.4;}
#navigator, #xyeva{position:absolute; width:459px; height:281px; background-color:#fff; margin-left:-231px; padding:0px; z-index:99; top:100px; left:50%;}
/*.tabborder {float:left; width:462px; height:285px;} */
.tab {float:left; width:457px; height:279px; border: 1px solid #A5E3ED;}
.tabtitle{width:455px; height:28px; border:1px solid #FFF; background:url(http://www.cnblogs.com/images/cnblogs_com/amwggyy504/TabTitleBg.jpg) repeat-x left top; color:#0079BC; font-size:14px; line-height:28px;}
.tabtitle img{float:right; margin:7px 10px 0 0;}
.tabcontent{width:457px; height:248px; border-top:1px solid #A5E3ED; background:url(http://www.cnblogs.com/images/cnblogs_com/amwggyy504/TabContentBg.jpg) no-repeat left top;}
.tabcontent ul{padding:20px 0; width:417px; margin-left:20px; *margin-left:0px; border-bottom:1px dotted #0079BC; text-align:left; line-height:20px; color:#0079BC;}
.tabcontent li{padding:0 10px;}
.tabcontent input{margin:0px 5px;}
</STYLE>
</HEAD><BODY><!--StartFragment--><A onclick=openEva(); href="#">弹出</A>
<SCRIPT language=javascript>
function openEva(){
var nav = new Navigator();
nav.createWin();
}
var preObjects = null;
var Navigator = function(id){
this.id = id;
};
Navigator.initIndex = 0;
Navigator.CONTAINER = "navigator";
Navigator.prototype.createWin = function(){
Mark.showHintDiv();
var html = "";
var container = document.createElement("DIV");
container.id = Navigator.CONTAINER;
html += "<div class='tabborder'>"
html += " <div class='tab'>"
html += " <div class='tabtitle'><ul><li style='float:left; padding-left:183px;'><strong>弹出框</strong></li><li style='float:right; width:20px;'><a href='javascript:Mark.close();'><img src='TabTitleClose.jpg'></img></a></ul></div>"
html += " <div class='tabcontent'>"
html += " <ul><li>自定义显示的内容</li></ul>"
html += " <ul><li>自定义显示的内容</li></ul>"
html += " </div>"
html += " </div>"
html += "</div>"
container.innerHTML = html;
document.body.appendChild(container);
}
/* 生成页面遮盖的方法 */
function gernateDivBg(){
var bg = document.createElement("DIV");
document.documentElement.style.overflow = "hidden";
with(bg.style){
position = "absolute";
top = "0px";
left = "0px";
width = document.documentElement.scrollWidth;
height = document.documentElement.scrollHeight;
}
return bg;
};
var Mark = new Object();
Mark.showHintDiv = function(){
var bg = gernateDivBg();
bg.id = Mark.id;
bg.className = "navigator_bg";
document.body.appendChild(bg);
}
Mark.close = function(){
if(document.getElementById(Mark.id)){
document.body.removeChild(document.getElementById(Mark.id));
}
if(document.getElementById(Navigator.CONTAINER))
document.body.removeChild(document.getElementById(Navigator.CONTAINER));
document.documentElement.style.overflowX= "hidden";
document.documentElement.style.overflowY= "auto";
};
</SCRIPT>
<!--EndFragment--></BODY>
</HTML>
你的效果很好，但是我的DIV里面有很多服务器端控件，和后台交互。所以你的方法不太合适..
text-align:center;
弹出的div的z-index要小于DropDownList的z-index
<iframe src="javascript:false" style="Z-INDEX:-1; FILTER:progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=0); LEFT:0px; VISIBILITY:inherit; WIDTH:300px; POSITION:absolute; TOP:0px; HEIGHT:200px">
</div>有人可能会在asp.net开发中，使用AJAX的CalendarExtender控件，该控件用的也是DIV，所以，如果它碰到下拉列表框的话，CalendarExtender也是无能为力的，不过该控件有更简单的方法来遮盖下拉列表框，就是在CSS中追加以下样式：.ajax__calendar {
position: relative;
left: 0px !important;
top: 0px !important;
visibility: visible;
display: block;
}
.ajax__calendar iframe
{
left: 0px !important;
top: 0px !important;
}这样，就可以使CalendarExtender控件遮盖掉下拉列表框了~~
div,html盖住select(dropdownlist)的方法
2007年11月01日 星期四 13:03
<div id="menu" style="position:absolute; visibility:hidden; top:20px; left:20px; width:100px; height:200px; background-color:#6699cc;">
<table>
<tr><td>item 1</td></tr>
<tr><td>item 2</td></tr>
<tr><td>item 3</td></tr>
<tr><td>item 4</td></tr>
<tr><td>item 5</td></tr>
</table>
<iframe src="javascript:false" style="position:absolute; visibility:inherit; top:0px; left:0px; width:100px; height:200px; z-index:-1; filter='progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=0)';"></iframe>
</div> <a href="#" onclick="document.getElementById('menu').style.visibility='visible'">menu</a> <form>
<select><option>A form selection list</option></select>
</form> 下拉框，即html的SELECT元素，.net设计时的DropDownList，是html中的windowed element，尤其ie6之后，几乎是唯一的windowed element（还有popup等少量极少用的的）。 普通的元素，textbox, div, table……这些，属于windowless element，它们之间互相遮盖的情况由z-index决定，在它们之上，是SELECT这些windowed element。所以一般情况下div、table等不能遮盖select。 这个问题广泛存在于各种弹出式控件的使用之中，比如日历控件等。 如果要显示div，以前的做法是，动态的，在显示的时候，让div区域的select不可见，div消失的时候，再恢复这些select元素。这种做法比较奇怪，因为它严格上并不是“遮盖”了select，而是，让她整个消失了，如果calendar弹出元素只是应该遮盖select元素的一部分，但select却整个不见，用户也许会觉得奇怪；做起来也麻烦，要用js逐一判断各select的位置。 ie5.5之后，有一个新的小技巧，称之为“iframe shim”（iframe加塞:p），可以真正的“遮盖”select元素。 它利用了一种特殊的元素：iframe。在ie5.5之前，iframe也是windowed element，但从5.5开始，iframe就是普通的windowless element了，可是，虽然是windowless element，iframe却可以盖住select。这种做法的原理就是：放一个iframe与你要显示的东西（比如说一个div）同样大小、位置，并设置z-index使得iframe在此DIV之下；这样，iframe遮盖了select，同时，iframe又在要显示的div的下面，div就露出来了。 限制：仅适用于ie5.5及以后版本。 参考文章链接：
http://dotnetjunkies.com/WebLog/jking/archive/2003/07/21/488.aspx 示例程序代码：
//html.select.hack.iframe shim.htm
<html>
<head>
<script>
function DivSetVisible(state)
{
var DivRef = document.getElementById('PopupDiv');
var IfrRef = document.getElementById('DivShim');
if(state)
{
DivRef.style.display = "block";
IfrRef.style.width = DivRef.offsetWidth;
IfrRef.style.height = DivRef.offsetHeight;
IfrRef.style.top = DivRef.style.top;
IfrRef.style.left = DivRef.style.left;
IfrRef.style.zIndex = DivRef.style.zIndex - 1;
IfrRef.style.display = "block";
}
else
{
DivRef.style.display = "none";
IfrRef.style.display = "none";
}
}
</script>
</head>
<body background="http://www.orkut.com/img/i_blau2.gif">
<form>
<select>
<option>A Select Box is Born ....</option>
</select>
</form>
<div
id="PopupDiv"
style="position:absolute;font:italic normal bolder 12pt Arial; top:25px; left:50px; padding:4px; display:none; color:#ffff00; z-index:100">
.... and a DIV can cover it up<br>through the help of an IFRAME.
</div>
<iframe
id="DivShim"
src="javascript:false;"
scrolling="no"
frameborder="0"
style="position:absolute; top:0px; left:0px; display:none;filter=progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=0);">
</iframe>
<br>
<br>
<a href="#" onclick="DivSetVisible(true)">Click to show DIV.</a>
<br>
<br>
<a href="#" onclick="DivSetVisible(false)">Click to hide DIV.</a>
</body>
</html>
你可以再后天拼接字符串啊，输出div
原来我遇到这样的问题，就是隐藏页面的下拉菜单，这种情况尽量避开些好。这是页面元素的优先级的造成的。没什么好办法。