CSS размер всплывающего слоя относительно размера окна

Question

Рабочий пример всплывающего окна я в настоящее время используется здесь:

http://jsfiddle.net/UUZpM/1/

Он основан на этом решении: http://blog.avtex.com/2012/01/26/cross-browser-css-only-modal-box/

HTML:

<div class="viewbox popupBoxWrap"> 
    <div class="vertical-offset"> 
     <div class="popupBox"> 
     <form style="height:300px"> 
     <table> 
      <tr><td>key</td><td>val</td></tr> 
      .... 
     </table> 
     </form> 
     </div> 
    </div> 
</div> 

CSS:

.popupBoxWrap { 
    z-index:40001; 
} 

.vertical-offset { /* Fixed position to provide the vertical offset */ 
    position:fixed; 
    top:5%; 
    width:100%; 
    z-index:40002; /* ensures box appears above overlay */ 
} 
.popupBox { /* The actual box, centered in the fixed-position div */ 
    width:300px; /* Whatever width you want the box to be */ 
    position:relative; 
    margin:0 auto; 

    background-color:white; 
    padding:10px; 
    border:1px solid black; 
} 

.popupBox form { 
    overflow: auto; 
} 

Но как вы можете видеть Heigh этого всплывающего окна устанавливается с фиксированным значением 300px, я попытался сделать установить его в perecent, но результат был неприемлем. Мне нужно, по крайней мере, установить высоту в % высоты окна. Любая идея, как выполнить эту задачу? Можно ли обойтись без Javascript?

Answer 1

, если вам нужно, чтобы ваши модальные (всплывающие) имеют ширину и высоту в% , это простой способ. [http://jsfiddle.net/achr3f/98MBD/][1]

, конечно, с JS вы можете сделать высоту (или ширину) зависит от разрешения окна, путем изменений Css атрибутов после загрузки страницы или после изменения размера