1

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

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;
}

但是正如您所看到的，此弹出窗口的高度设置为固定值300px，我尝试将其设置为百分比，但结果是不可接受的。我至少需要将高度设置为窗口高度的百分比。知道如何完成这项任务吗？没有Javascript可以吗？

4

1 回答 1

2

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

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

于 2013-08-07T09:14:55.267 回答