Question

我想知道你是否可以帮助我。我的网站上有各种按钮，点击时会弹出一个弹出窗口。无论是单击页面顶部还是底部的按钮，我都需要在页面中间显示弹出窗口。我用于弹出窗口的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并使用了屏幕的百分比但是没有效果。有什么帮助吗？

Answer 1

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

'绝对'将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;
}

尽管滚动，弹出窗口仍以页面为中心

1 个答案: