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

尝试将位置从绝对更改为固定。

'Absolute' 相对于其正常位置定位 div，而 'fixed' 将相对于浏览器定位它。

试试这个：

.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 回答