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彈出層的尺寸相對於窗口大小

回答

相關問題