Question

尝试制作模态弹出窗口[居中，位置：固定]，其中央部分（#scroller）的最小高度为600px，最大高度为屏幕高度的80％。

在尝试了所有常用的技巧之后，我仍然无法到达任何地方。

它在最小高度上工作正常，但在最大高度上没有。

毫无疑问，这个问题还有另外一个问题，但我已经阅读过几十个，而且没有得到任何答案。

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

Answer 1

有一种更简单的方法来设置模态： 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);
}

您可以根据代码进行调整。

布局80％显示：表格

1 个答案: