不被select选择框遮挡的div层 (可拖动)-- 2007-12-21的博客搬家

来源：互联网发布：mac批量删图快捷方式编辑：程序博客网时间：2024/05/16 17:02

原地址：http://fengxupeng.bokee.com/6574609.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>不被select遮挡的层</title>
<script>
//var isSupportDOM = !!document.getElementById; //两个取反，意思是强制转型
//alert("你的浏览器 " +(isSupportDOM?"":"不")+ "支持 DOM！");
function my_createElement(id){
    try
    {
    var node = document.getElementById(id);
    node.parentNode.removeChild(node);

    }
    catch(x)
    {

    }
    //alert("插入元素前的body HTML：\n" +document.body.outerHTML);
    node = document.createElement("DIV");
    node.id=id;
    document.body.appendChild(node);
    //alert("插入元素后的body HTML：\n" +document.body.outerHTML);
}
function my_div_center(str,path,cover){
   my_createElement("window_div");
   my_createElement("cover_div");
   if(path!=''){
    window_div.innerHTML="<div ID=mdiv onmousedown=\"MoveStart(this)\" STYLE=\" position: absolute; top:0; left:0;width:300;height:120;z-index:10001;border:0px solid #0066A7;cursor:move;BACKGROUND-COLOR:#E9F5F7;FILTER:Alpha(Opacity=80);\">"+
   "<table cellpadding=\"0\" border=\"0\" cellspacing=\"1\" width=\"100%\" height=\"100%\" bgcolor=\"#0066A7\">"+
            "<form action="+path+" method=post name=LogonForm>"+
   "<tr bgcolor=\"#E9F5F7\"><td align=center height=20>"+str+"<p><input type=submit value=\"OK\" style=\"cursor:hand;\">"+
   "</form>"+
            "<iframe id=\"m_iframe\" scrolling=\"no\" frameborder=\"1\" vspale=\"0\" style=\"position:absolute; top:0px; left:0px;height:120px;z-index:-1;\"></iframe></td></tr>"+
   "</table></div>";
   }else{
    window_div.innerHTML="<div ID=mdiv onmousedown=\"MoveStart(this)\" STYLE=\" position: absolute; top:0; left:0;width:300;height:120;z-index:10001;border:0px solid #0066A7;cursor:move;BACKGROUND-COLOR:#E9F5F7;FILTER:Alpha(Opacity=80);\">"+
   "<table cellpadding=\"0\" border=\"0\" cellspacing=\"1\" width=\"100%\" height=\"100%\" bgcolor=\"#0066A7\">"+
   "<tr bgcolor=\"#E9F5F7\"><td align=center height=20>"+str+"<p><input type=submit value=\"OK\" style=\"cursor:hand;\" onclick=close_div()>"+
            "<iframe id=\"m_iframe\" scrolling=\"no\" frameborder=\"1\" vspale=\"0\" style=\"position:absolute; top:0px; left:0px;height:120px;z-index:-1;\"></iframe></td></tr>"+
   "</table></div>";
   }
   f_div_center(mdiv);
   if(cover=='cover'){
    divCover();
   }
}

///////////////////////////////////////////////////////////////////////////////////////

function close_div(){
  document.getElementById("mdiv").style.visibility = "hidden";
}
function f_div_center(divstr){
   var d = document.documentElement;
   var x1 = d.scrollLeft;
   var y1 = d.scrollTop;
   var w1 = d.clientWidth;
   var h1 = d.clientHeight;
   divstr.style.setExpression("left",
   ((w1 - divstr.offsetWidth)/2 +x1)
   );
   divstr.style.setExpression("top",
   ((h1 - divstr.offsetHeight)/2+y1)
   )
}

///////////////////////////////////////////////////////////////////
var over=false,down=false,divleft,divtop,n;

function MoveStart(obj){
obj.setCapture();
var ox=event.clientX;
var oy=event.clientY;
function obj.onmousemove(){
    if(obj){
    var nx=event.clientX;
    var ny=event.clientY;
    obj.style.posLeft+=nx-ox;
    obj.style.posTop+=ny-oy;
    ox=nx;
    oy=ny;
    }
   }
function obj.onmouseup(){
    var nx=event.clientX;
    var ny=event.clientY;
    var stop=0;

    obj.releaseCapture();
    obj=false;
   }
}
////////////////////////////////////////////////////////////////////

function divCover(){
   cover_div.innerHTML="<div ID=\"div2\" STYLE=\" position: absolute; z-index:10001;border:1px solid #0066A7;BACKGROUND-COLOR:#E9F5F7;FILTER:Alpha(Opacity=10);\">"+
   "<iframe id=\"m_iframe_cover\" src=\"\" scrolling=\"no\" frameborder=\"0\" vspale=\"0\" style=\"position:absolute; top:0px; left:0px;height:0px;z-index:-1;\"></iframe></div>";

   HideOverSels();
}
function HideOverSels()
{

   document.getElementById("div2").style.left=0;
   document.getElementById("div2").style.top=0;
   document.getElementById("div2").style.width=document.body.clientWidth;
   document.getElementById("div2").style.height=document.body.scrollHeight;
   document.getElementById("m_iframe_cover").style.left=0;
   document.getElementById("m_iframe_cover").style.top=0;
   document.getElementById("m_iframe_cover").style.width=document.body.clientWidth;
   document.getElementById("m_iframe_cover").style.height=document.body.scrollHeight;
  /* //select 开关
   var sels = document.getElementsByTagName('select');
   //alert (sels);
   for (var i = 0; i < sels.length; i++){
    //sels[i].style.visibility = 'hidden';
    sels[i].disabled = true;
   }
  */

}
/**********************************************************************************/
function my_iframe_center(path,width,height)
{

   my_createElement("window_div");

   /*
   window_div.innerHTML="<DIV ID=mdiv onmousedown=\"MoveStart(this)\" STYLE=\" position: absolute; top:0; left:0;width:600;height:340;z-index:10001;border:1px solid #0066A7;cursor:move;BACKGROUND-COLOR:#E9F5F7;FILTER:Alpha(Opacity=100);\">"+
    "<iframe id=\"m_iframe\" src=\""+path+"\" scrolling=\"no\" frameborder=\"0\" vspale=\"0\" style=\"position:absolute; top:20px; left:0px;height:320px;width:600px;z-index:-1;\"></iframe><br></DIV>";
   f_div_center(mdiv);
   */
   if(width=='')width="600";
   if(height=='')height="360";

   framWidth=width-4;
   framHeight=height-24;

   window_div.innerHTML="<div ID=mdiv onmousedown=\"MoveStart(this)\" STYLE=\" position: absolute; top:0; left:0;width:"+width+"px;height:360px;z-index:1000;border:0px solid #0066A7;cursor:move;FILTER:Alpha(Opacity=100);\">"+
   "<table cellpadding=\"0\" border=\"0\" cellspacing=\"1\" width=\"100%\" height=\"20px\" style=\"border-top: 1px solid #0066A7;border-left: 1px solid #0066A7;border-right: 1px solid #0066A7\">"+
   "<tr bgcolor=\"#E9F5F7\"><td >"+
            "<iframe id=\"miframe\" scrolling=\"no\" frameborder=\"0\" vspale=\"0\" style=\"position:absolute; width:"+width+"px;height:"+height+"px;top:0px; left:0px;z-index:-1;\"></iframe></td></tr></table>"+
   "<iframe id=\"m_iframe\" src=\""+path+"\" scrolling=\"no\" frameborder=\"0\" vspale=\"0\" style=\"position:absolute; top:20px; left:0px;height:"+framHeight+"px;width:"+framWidth+"px;z-index:1;border: solid #0066A7 1px;\"></iframe><br>"+
   "</div>";

f_div_center(mdiv);

}
</script>
<script type="text/javascript" src="mydiv.js"></script>
</head>

<body>
<form>
<select name="">
<option>test1</option>
<option>test2</option>
<option>test3</option>
</select>
</form>
<input onclick="my_div_center('MyDiv','input.html','')" type="button" value="div"/> select 不遮挡div,其他按钮可点。
<br>
<br>
<input onclick="my_iframe_center('http://','400','320')" type="button" value="iframe"/> 可载入其他页面，按钮可点。
<br>
<br>
<input onclick="my_div_center('MyDiv','','cover')" type="button" value="cover div"/> select 不遮挡div,其他按钮不可点。
<p>

</body>
</html>

0 0