2

私はポップアップボックスに取り組んでいます。ボタンをクリックするとボックスがポップアップするページがあります。この問題は、ポップアップが画面の中央にないことです。ページをクロスブラウザ対応にする必要があります。

これが私のコードです。

CSS:

.popup{
    /* css3 drop shadow */
    -webkit-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
       -moz-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
    /* css3 border radius */
    -webkit-border-radius: 5px;
       -moz-border-radius: 5px;
    background:#eee;
    /* styling of the dialog box, i have a fixed dimension for this demo */
    width:50%;
    /* make sure it has the highest z-index */
    clear:both; 
    height:240px;
    position:relative;
    z-index:5000;
    /* hide it by default */
    display:none;
}
4

1 に答える 1

4

水平方向と垂直方向の中央揃え:

.popup{
    -webkit-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
       -moz-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
            box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
    -webkit-border-radius: 5px;
       -moz-border-radius: 5px;
            border-radius: 5px;
    background: #eee;
    width: 50%;
    height: 240px;
    z-index: 5000;
    position: absolute;
    left: 50%;
    top: 50%;
    margin-left: -25%;
    margin-top: -120px;
    clear: both;
//    display: none;
}

フィドル: http://jsfiddle.net/AwCWs/

于 2013-04-22T18:05:37.667 に答える