CSS弹出层的尺寸相对于窗口大小

它是基于这样的解决方案：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; 
}

但是你可以看到这个弹出的唤起注意设置固定值300px，我试图在perecent做出设定，但结果是不可接受的。我需要至少在窗口高度的％中设置高度。任何想法如何完成这项任务？是否有可能没有Javascript？

来源

2013-08-07 Dfr

所以，你要弹出来接管整个页面？或者只是设置弹出百分比？ – designtocode

是的，当我尝试设置'％'值时，滚动被破坏 – Dfr

如果你需要你的模态（弹出）有宽度和高度在％这是简单的方法。 [http://jsfiddle.net/achr3f/98MBD/][1]

当然与JS的可以使高度（或宽度）取决于窗口分辨率，通过改变页面加载后的CSS属性或之后调整

来源

2013-08-07 09:14:55 achr3f

CSS弹出层的尺寸相对于窗口大小

回答

相关问题