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

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?