Moving div around the page, it gets deformed on screen edge

Question

I have some popups whit this structure:

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

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

I later move the popup i get , grabbing the "class='popup_title'" divs and moving around the parent element. Using this kind of script:

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

Very simple but it works. The problem is that when i get near the edge of the screen, right edge, the div get i'm moving get compressed instead of going offscreen. It get compressed till is possible , wrapping text , when not possible anymore it goes offscreen. When i go back it goes to is standard dimension as soon as possible. There is any method to avoid this? like setting some css of the div i'm moving?

Answer 1

Ok i solved. Or really i didn't solve but i found design error and sort of solution. I have a container that basically is the big shadow that cover everything when the popup comes out. The popup is child of this shadow, so when i go edge of the screen, really i go edge of the shadow and the web browser of course try to make the popup stay inside it. So i gave

width:300%

to my "shadow" container and now it looks fine. ( strange on the left and bottom side it was not happening... )

So now real solution would be to make the shadow not parent to popup, but this would require to have to style.display='block' each time i need to show a popup ( big deal? ) or keep this width:300% Someone as some good suggestion to give me?