RSS订阅悠然探索,悠然索取
你的位置:首页 » 技术笔记 » 正文

Select挡不住的Div浮动窗口

选择字号: 超大 标准 发布时间:2008-9-11 9:53:27 | 作者:admin | 0个评论 | 人浏览

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <style>
html,body{font-size:12px;margin:0px;height:100%;}
.mesWindow{border:#666 1px solid;background:#fff;}
.mesWindowTop{border-bottom:#eee 1px solid;margin-left:4px;padding:3px;font-weight:bold;text-align:left;font-size:12px;}
.mesWindowContent{margin:4px;font-size:12px;}
.mesWindow .close{height:15px;width:28px;border:none;cursor:pointer;text-decoration:underline;background:#fff}
</style>

    <script>
var isIe=(document.all)?true:false;
//设置select的可见状态
function setSelectState(state)
{
 var objl=document.getElementsByTagName('select');
 for(var i=0;i<objl.length;i++)
 {
 objl[i].style.visibility=state;
 }
}
function mousePosition(ev)
 {
 if(ev.pageX || ev.pageY)
 {
 return {x:ev.pageX, y:ev.pageY};
 }
 return {
 x:ev.clientX + document.body.scrollLeft - document.body.clientLeft,y:ev.clientY + document.body.scrollTop - document.body.clientTop
 };
 }
//弹出方法
function showMessageBox(wTitle,content,pos,wWidth)
{
 closeWindow();
 var bWidth=parseInt(document.documentElement.scrollWidth);
 var bHeight=parseInt(document.documentElement.scrollHeight);
 if(isIe){
 setSelectState('hidden');}
 var back=document.createElement("div");
 back.id="back";
 var styleStr="top:0px;left:0px;position:absolute;background:#666;width:"+bWidth+"px;height:"+bHeight+"px;";
 styleStr+=(isIe)?"filter:alpha(opacity=40);":"opacity:0.40;";
 back.style.cssText=styleStr;
 document.body.appendChild(back);
 var mesW=document.createElement("div");
 mesW.id="mesWindow";
 mesW.className="mesWindow";
 mesW.innerHTML="<div class='mesWindowTop'><table width='100%' height='100%'><tr><td>"+wTitle+"</td><td style='width:1px;'><input type='button' onclick='closeWindow();' title='关闭窗口' class='close' value='关闭' /></td></tr></table></div><div class='mesWindowContent' id='mesWindowContent'>"+content+"</div><div class='mesWindowBottom'></div>";
 
 styleStr="left:"+(((pos.x-wWidth)>0)?(pos.x-wWidth):pos.x)+"px;top:"+(pos.y)+"px;position:absolute;width:"+wWidth+"px;";
 mesW.style.cssText=styleStr;
 document.body.appendChild(mesW);
}
 function showBackground(obj,endInt)
{
 obj.filters.alpha.opacity+=1;
 if(obj.filters.alpha.opacity<endInt)
 {
 setTimeout(function(){showBackground(obj,endInt)},8);
 }
}
//关闭窗口
function closeWindow()
{
 if(document.getElementById('back')!=null)
 {
 document.getElementById('back').parentNode.removeChild(document.getElementById('back'));
 }
 if(document.getElementById('mesWindow')!=null)
 {
 document.getElementById('mesWindow').parentNode.removeChild(document.getElementById('mesWindow'));
 }
 
 if(isIe){
 setSelectState('');}
}

self.onError=null;                             
currentX = currentY = 0;                              
whichIt = null;                                        
lastScrollX = 0; lastScrollY = 0;                             
NS = (document.layers) ? 1 : 0;                            
IE = (document.all) ? 1: 0;                             
<!-- STALKER CODE -->                             
function heartBeat()
 {                             
    if(IE)
    {
        diffY = document.body.scrollTop; diffX = document.body.scrollLeft;
    }                            
    if(NS)
    {
        diffY = self.pageYOffset; diffX = self.pageXOffset;
    }          
    if(diffY != lastScrollY)
    {           
        percent = .1 * (diffY - lastScrollY);   
        if(percent > 0) percent = Math.ceil(percent);
        else percent = Math.floor(percent); 
        if(IE) document.all.mesWindow.style.pixelTop += percent; 
        if(NS) document.mesWindow.top += percent;                
        lastScrollY = lastScrollY + percent;     
    }                      
    if(diffX != lastScrollX)
    {      
        percent = .1 * (diffX - lastScrollX);    
        if(percent > 0) percent = Math.ceil(percent);      
        else percent = Math.floor(percent);                  
        if(IE) document.all.mesWindow.style.pixelLeft += percent;       
        if(NS) document.mesWindow.left += percent;      
        lastScrollX = lastScrollX + percent;                    
    }                          
}                        
<!-- /STALKER CODE -->             
<!-- DRAG DROP CODE -->  
          
function checkFocus(x,y)
{        
    stalkerx = document.mesWindow.pageX;    
    stalkery = document.mesWindow.pageY;                       
    stalkerwidth = document.mesWindow.clip.width;             
    stalkerheight = document.mesWindow.clip.height;                        
    if( (x > stalkerx && x < (stalkerx+stalkerwidth)) && (y > stalkery && y < (stalkery+stalkerheight)))
        return true;                     
    else
        return false;       
}                    
function grabIt(e)
{           
    if(IE)
    {                           
        whichIt = event.srcElement;
        while (whichIt.id.indexOf("mesWindow") == -1)
        {   
            whichIt = whichIt.parentElement;                          
            if (whichIt == null)
            {
                return true;
            }        
        }                           
        whichIt.style.pixelLeft = whichIt.offsetLeft;                             
        whichIt.style.pixelTop = whichIt.offsetTop;                         
        currentX = (event.clientX + document.body.scrollLeft);                      
        currentY = (event.clientY + document.body.scrollTop);                       
    }
    else
    {                            
        window.captureEvents(Event.MOUSEMOVE);   
        if(checkFocus (e.pageX,e.pageY))
        {                           
            whichIt = document.mesWindow;                             
            stalkerTouchedX = e.pageX-document.mesWindow.pageX;     
            StalkerTouchedY = e.pageY-document.mesWindow.pageY;         
        }                             
    }                           
    return true;                       
}                           
function moveIt(e)
{              
    if (whichIt == null)
    {
        return false;
    }      
    if(IE)
    {                            
        newX = (event.clientX + document.body.scrollLeft);                          
        newY = (event.clientY + document.body.scrollTop);               
        distanceX = (newX - currentX);    distanceY = (newY - currentY);  
        currentX = newX;    currentY = newY;                      
        whichIt.style.pixelLeft += distanceX;                         
        whichIt.style.pixelTop += distanceY;                     
        if(whichIt.style.pixelTop < document.body.scrollTop) whichIt.style.pixelTop = document.body.scrollTop;    if(whichIt.style.pixelLeft < document.body.scrollLeft) whichIt.style.pixelLeft = document.body.scrollLeft; if(whichIt.style.pixelLeft > document.body.offsetWidth - document.body.scrollLeft - whichIt.style.pixelWidth - 20) whichIt.style.pixelLeft = document.body.offsetWidth - whichIt.style.pixelWidth - 20;
        if(whichIt.style.pixelTop > document.body.offsetHeight + document.body.scrollTop - whichIt.style.pixelHeight - 5) whichIt.style.pixelTop = document.body.offsetHeight + document.body.scrollTop - whichIt.style.pixelHeight - 5; 
        event.returnValue = false; 
    }
    else
    {  
        whichIt.moveTo(e.pageX-StalkerTouchedX,e.pageY-StalkerTouchedY);
        if(whichIt.left < 0+self.pageXOffset) whichIt.left = 0+self.pageXOffset;
        if(whichIt.top < 0+self.pageYOffset) whichIt.top = 0+self.pageYOffset; 
        if( (whichIt.left + whichIt.clip.width) >= (window.innerWidth+self.pageXOffset-17)) whichIt.left = ((window.innerWidth+self.pageXOffset)-whichIt.clip.width)-17;
        if( (whichIt.top + whichIt.clip.height) >= (window.innerHeight+self.pageYOffset-17)) whichIt.top = ((window.innerHeight+self.pageYOffset)-whichIt.clip.height)-17;
        return false;
     }
     return false; 
}  
function dropIt()
{    
    whichIt = null;    
    if(NS) window.releaseEvents (Event.MOUSEMOVE); 
    return true;            
 }                    
<!-- DRAG DROP CODE --> 
if(NS)
{   
    window.captureEvents(Event.MOUSEUP|Event.MOUSEDOWN);
    window.onmousedown = grabIt;
    window.onmousemove = moveIt;
    window.onmouseup = dropIt;
}             
if(IE)
{                    
    document.onmousedown = grabIt;   
    document.onmousemove = moveIt;  
    document.onmouseup = dropIt;         
 }                    


//测试弹出
function testMessageBox(ev)
{
 var objPos = mousePosition(ev);
 messContent="<div style='padding:20px 0 20px 0;text-align:center'>消息正文</div>";
 showMessageBox('窗口标题',messContent,objPos,350);
}
    </script>

</head>
<body>
    <div style="padding: 20px">
        <div style="text-align: left">
            <a href="#none" onclick="testMessageBox(event);">弹出窗口</a></div>
        <div style="text-align: left; padding-left: 20px; padding-top: 10px">
            <select>
                <option>下拉</option>
            </select>
            弹出窗口时会将其隐藏,关闭时会让其显示,目的是在IE中防止弹出的DIV挡不住下拉框</div>
        <div style="text-align: center">
            <a href="#none" onclick="testMessageBox(event);">弹出窗口</a></div>
        <div style="text-align: right">
            <a href="#none" onclick="testMessageBox(event);">弹出窗口</a></div>
    </div>
</body>
</html>

 

标签:

猜你喜欢

发表评论

必填

选填

选填

必填,不填不让过哦,嘻嘻。

记住我,下次回复时不用重新输入个人信息

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。