Question

所以我得到了这个：

<div class="addedcartbg"><div class="addedcart"> Successfully added to cart. </div></div>

我想让它在点击图像时弹出屏幕中间。图像当前正在打开“＃”，因此它只会显示在页面顶部。

我的问题是，当我将addedcartbg设置为position：fixed时，它会完全从页面中消失。我还需要知道如何在屏幕的中间垂直居中，我知道我可以设置左右边距自动使其水平居中，但这不适用于顶部和底部。

这是我目前的div的CSS代码：

.addedcartbg .addedcart {
background-color: #999;
height: 40px;
width: 300px;
margin-right: auto;
margin-left: auto;
padding-top: 15px;

}
.addedcartbg {
background-color: rgba(153,153,153,0.3);
height: 80px;
width: 320px;
padding-top: 40px;
padding-right: 30px;
padding-left: 30px;
}

Answer 1

我认为这是你的lighbox类，而不是像这样修改它，这应该为你做的工作

Demo

.addedcartbg {
   background-color: rgba(153,153,153,0.3);
   height: 80px;
   width: 320px;
   padding-top: 40px;
   padding-right: 30px;
   padding-left: 30px;
   position: absolute;
   top: 50%;
   left: 50%;
   margin-top: -50px; /*half of total height + half of top padding*/
   margin-left: -175px; /*half of total width + half of left padding*/
}

Answer 2

顶部和底部以及位置。你可能还想为身体添加样式。

body {
    text-align:center;
/*the rest of your style*/
}

.addedcartbg {
    position: relative;
    top:200;
    margin-right: auto;
    margin-left: auto;
/*the rest of your style*/
}

Answer 3

你还应该添加一个z-index

.addedcartbg {
  z-index:9999; // include this to avoid overlay of other divs.
}

将弹出式div放在屏幕中央

3 个答案: