1

あなたが私を助けてくれるかどうか疑問に思っていました。サイトには、クリックするとポップアップが表示されるさまざまなボタンがあります。ページの上部または下部のボタンをクリックしても、ページの中央にポップアップを表示する必要があります。ポップアップに使用するCSSコードは

.popupheading{ font-size:18px; font-weight:bold; color:#ff0000}
.popupmsg{
    position:absolute;
    width:600px;
    padding:20px;
    margin:10px;
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fcf5f4',   endColorstr='#fddad8',GradientType=0 );
    border-radius: 5px 5px 5px 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    -khtml-border-radius: 5px;
    border-radius: 5px;
    -moz-box-shadow:0px 0px 5px 1px #e0e0e0;
    -webkit-box-shadow:0px 0px 5px 1px #e0e0e0;
    box-shadow:0px 0px 5px 1px #e0e0e0;
    text-shadow:1px 1px 0px #ffffff;
    border: 1px solid #f0cac8;
    text-align:center;
    font-size:13px;
    color:#333;
}

margin-left画面のパーセンテージを使用して使用しようとしmargin-topましたが、うまくいきませんでした。何か助けはありますか？

4

1 に答える 1

4

位置を絶対位置から固定位置に変更してみてください。

「絶対」は div を通常の位置に対して相対的に配置しますが、「固定」はブラウザーに対して相対的に配置します。

これを試して：

.popupheading{ font-size:18px; font-weight:bold; color:#ff0000}
.popupmsg{
position: fixed;
left: 50%;
top: 50%;
z-index: 100;
height: 400px;
margin-top: -200px;
margin-left: -300px;
width:600px;
padding:20px;
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fcf5f4',   endColorstr='#fddad8',GradientType=0 );
border-radius: 5px 5px 5px 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-khtml-border-radius: 5px;
border-radius: 5px;
-moz-box-shadow:0px 0px 5px 1px #e0e0e0;
-webkit-box-shadow:0px 0px 5px 1px #e0e0e0;
box-shadow:0px 0px 5px 1px #e0e0e0;
text-shadow:1px 1px 0px #ffffff;
border: 1px solid #f0cac8;
text-align:center;
font-size:13px;
color:#333;
}
于 2013-11-01T12:59:14.740 に答える