0

我有一些带有这种结构的弹出窗口：

<div id="pop_cont" class="popup_cont" >
    <div id="pop" class="popup" >
        <div class="xclose" ><img src="images/divclose.png" onclick="closediv('pop_cont');" title="chiudimi" /></div>
        <div id="pop_title" class="popup_title" >TITLE</div>
        <div id="pop_int" >SOME CONTENT</div>
    </div>
</div>

用这个CSS：

#alert_cont, .alert_cont, .popup_cont {
    z-index:600;
    position:fixed;
    top:0px;
    left:0px;
    width:100%;
    height:100%;
    background-color:rgba(0,0,0,0.5);
    display: none;
}

#alert, .alert, .popup{
    position: absolute;
    background-color: white;
    border: 1px solid black;
    border-collapse: collapse;
}

#alert_int, .alert_int, .popup_int{
    padding:10px;
}

.xclose {
    right: 1px;
    top: 1px;
    float: right;
    cursor:pointer;
    border:0px; 
}

#alert_title, .alert_title, .popup_title{
    background-color:#ffd600;
    border:1px solid #ffe666;
    color: #000000;
    font-weight: bold;
    font-family: Arial, Helvetica, sans-serif;
    text-align:center;
    cursor: move;
}

我稍后移动我得到的弹出窗口，抓住“class ='popup_title'” div并在父元素周围移动。使用这种脚本：

var oDrag = null
var x,y,dx,dy

function mdown(e) {
    if (!e) var e = window.event;
    oDrag = (e.target) ? e.target : e.srcElement
    if (oDrag.className=='popup_title'){
        oDrag=oDrag.parentElement;
        x = e.clientX;
        y = e.clientY;
        dx = x - parseInt(oDrag.style.left);
        dy = y - parseInt(oDrag.style.top);
        document.onmousemove=mdrag_on;
        document.onmouseup=mdrag_off;
    } else {
        oDrag = null;
    }
}

function mdrag_on(e) {
    if (!e) var e = window.event;
    oDrag.style.left = parseInt(e.clientX - dx)+'px';
    oDrag.style.top =parseInt(e.clientY - dy)+'px';
    return false
}

function mdrag_off(e) {
    document.onmousemove=null;
}

非常简单，但它有效。问题是当我靠近屏幕边缘时，右边缘，我移动的 div 被压缩而不是离开屏幕。它被压缩直到可能，包装文本，当不再可能时它会离开屏幕。当我回去时，它会尽快变为标准尺寸。有什么方法可以避免这种情况吗？像设置我正在移动的 div 的一些 CSS 吗？

4

1 回答 1

0

好的，我解决了。或者真的我没有解决，但我发现了设计错误和某种解决方案。我有一个容器，基本上是弹出窗口出现时覆盖所有内容的大阴影。弹出窗口是这个阴影的孩子，所以当我走到屏幕边缘时，我真的走到了阴影的边缘，网络浏览器当然会尝试让弹出窗口留在里面。所以我给了

width:300%

到我的“影子”容器，现在看起来不错。（奇怪的是左侧和底部没有发生......）

所以现在真正的解决方案是让阴影不是弹出的父级，但这需要 style.display='block' 每次我需要显示一个弹出窗口（大不了？）或保持这个宽度：300% 有人作为给我的一些好建议？

于 2013-08-21T12:23:50.857 回答