你的位置：首页 » 技术笔记 » 正文

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>

self.onError=null;
currentX = currentY = 0;
whichIt = null;
lastScrollX = 0; lastScrollY = 0;
NS = (document.layers) ? 1 : 0;
IE = (document.all) ? 1: 0;

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;
    }
}



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;
}

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>

标签：

Select挡不住的Div浮动窗口

猜你喜欢

发表评论