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