Question

我在这个结构中有一些弹出窗口：

<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？

Answer 1

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

width:300%

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

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

在页面上移动div，它会在屏幕边缘变形

1 个答案: