Получение встроенного HTML/JavaScript всплывающее окно появится в центре экрана независимо от разрешения

Question

Я использую следующий Javascript и CSS для создания всплывающих окон:

<script type="text/javascript"> 
    Sys.debug = true; 
    var popup; 
    Sys.require(Sys.components.popup, function() { 
     popup = Sys.create.popup("#popup", { 
      parentElementID: "target", 
     }); 
    }); 
    var popup2; 
    Sys.require(Sys.components.popup, function() { 
     popup2 = Sys.create.popup("#popup2", { 
      parentElementID: "target", 
     }); 
    }); 
</script> 

#popup 
{ 
    width: 400px; 
    height: 250px; 
    overflow: scroll; 
    background-color: #EAFDB3; 
    border: solid 2px black; 
} 
#popup2 
{ 
    width: 400px; 
    height: 250px; 
    background-color: #EAFDB3; 
    border: solid 2px black; 
} 

Расположение появляются эти всплывающие окна осуществляется с помощью:

<span id="target" style="position: absolute; top: 50%; left: 50%; margin-top: -50px; margin-left: -100px;"></span> 

содержание всплывающего окна проходит между:

<div id="popup" style="background: #EAFDB3; color: #000; padding: 15px; margin: 0px">CONTENT </div> 

Как я могу получить это всплывающее всплывать в в середине экрана, независимо от разрешения?

Answer 1

Установить до 50%, оставить на 50%. Затем укажите отрицательное левое поле, которое составляет половину ширины всплывающего окна, а отрицательное верхнее поле - половину высоты всплывающего окна. То, что у вас, кажется, близко ...

Но маржа-верх должна быть -125px, а margin-left - -200px, учитывая всплывающее окно размером 400x250.

Answer 2

Вы предоставляете встроенный стиль (даже такое же свойство), а также с помощью ID. Я предлагаю сделать это только один раз и использовать ID.

Answer 3

Для всплывающих окон динамического размера рассмотрите возможность обертывания содержимого в div.vc-external и div.vc-inner.

CSS

.vc-outer { 
    display: table; 
    position: fixed; 
    width: 100%; 
    height: 100%; } 

.vc-inner { 
    display: table-cell; 
    text-align: center; 
    vertical-align: middle; } 

.popup { 
    display: inline-block; } 

HTML

<div class="vc-outer"><div class="vc-inner"> 
    <div class="popup">Hey!</div> 
</div></div>