Question

我目前使用的弹出窗口的工作示例如下：

它基于这个解决方案：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？

Answer 1

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

当然使用JS，您可以通过在页面加载后或调整大小后更改Css属性来使高度（或宽度）取决于窗口分辨率

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

1 个答案: