0

中央セクション (#scroller) の最小高さが 600px、最大高さが画面の高さの 80% であるモーダル ポップアップ [centered, position:fixed] を作成しようとしています。

すべての通常のトリックを試した後、私はまだどこにも行きません.

最小の高さでは正常に機能しますが、最大の高さでは機能しません。

これに関する別の 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 に答える