0

我正在尝试制作一个模态弹出窗口[居中，位置：固定]，其中心部分（#scroller）的最小高度为 600 像素，最大高度为屏幕高度的 80%。

在尝试了所有通常的技巧之后，我仍然没有得到任何结果。

它适用于最小高度，但不适用于最大高度。

毫无疑问，关于此的另一个 SO 问题，但我已经阅读了几十篇，但没有得到任何地方。

http://jsfiddle.net/2Ders/1/

<div class='modal'>
    <form action='../dataHandler.php'>
        <figure>
            <h5>Header</h5>
            <div id='scroller'></div>
            <p class='after'>PostContent</p>
        </figure>
    </form>
</div>


<style>
html{height:100%;}
body{min-height:100%}

.modal{
    display: table;
    height: 100%;
    left: 0;
    position: fixed;
    table-layout: fixed;
    top: 0;
    width: 100%;
    z-index: 7;
    background-color:rgba(100,100,100,0.5);
    text-align:center;
    }
form {
    display: table-cell;
    vertical-align: middle;
    }
figure{
    background-color: #FFFFFF;
    border: 10px solid #888888;
    box-shadow: 0 1px 0 #2AB7EC inset, 0 2px 0 0 #156785, 0 5px 3px #999999;
    display: inline-block;
    font-size: 14px;
    margin: auto;
    min-height: 150px;
    min-width: 600px;
    position: relative;
    text-align: justify;
    }
#scroller{
    font-size: 14px;
    text-align: justify;
    max-height:80%;
    overflow:auto;
    }
</style>
4

1 回答 1

0

有一种更简单的方法来设置模态：http: //jsfiddle.net/hT5dx/1/

HTML：

<div class='modal_shadow'>
    <div class='modal' >
        <div class='modal_content' >
            <h2>title</h2>
            <p>
               Bacon ipsum dolor ...
            </p>
        </div>
    </div>
</div>

CSS：

.modal_shadow {
    position: fixed;
    top:0;
    right:0;
    bottom:0;
    left:0;
    background: rgba(80,80,80,0.5);
}

.modal {
    width:80%;
    margin:0 auto;   
    max-height: 80%;
    outline: 1px solid red;
    overflow:auto;

    /* vertical center */
    -moz-transform: translate(0px, 50px);
    -webkit-transform: translate(0px, 50px);
    -o-transform: translate(0px, 50px);
    -ms-transform: translate(0px, 50px);
    transform: translate(0px, 50px);
}

您可以将其调整为您的代码。

于 2013-05-24T10:27:59.617 回答