Перемещение DIV вокруг страницы, он деформируется на краю экрана

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'" divs и перемещение по родительскому элементу. Используя этот вид сценария:

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, я двигаюсь, становлюсь сжатым, а не выходящим из экрана. Это сжатие до возможно, обертывание текста, когда это невозможно, он выходит за пределы экрана. Когда я вернусь, он станет стандартным размером как можно скорее. Есть ли способ избежать этого? как установить некоторые css div, которые я перемещаю?

Answer 1

Хорошо, я решил. Или действительно я не решил, но нашел ошибку дизайна и своеобразное решение. У меня есть контейнер, который в основном представляет собой большую тень, которая покрывает все, когда всплывающее окно выходит. Всплывающее окно является дочерним элементом этой тени, поэтому, когда я перехожу к краю экрана, на самом деле я иду по краю тени и веб-браузер, конечно, стараюсь, чтобы всплывающее окно оставалось в нем. Так я дал

width:300% 

в мой контейнер «тени», и теперь она выглядит хорошо. (странно на левой и нижней сторонах этого не происходило ...)

Итак, теперь реальным решением было бы сделать всплывающее окно shadow not parent, но для этого потребовалось бы style.display = 'block' each мне нужно показать всплывающее окно (большое дело?) или сохранить эту ширину: 300% Кто-нибудь как хорошее предложение дать мне?