最近,我被分配去复制我们以前的Web开发人员制作的JS弹出窗口的工作。我有一个非常相似的地方,但有一件我无法获得的,因为关闭按钮(X)浮动在弹出窗口的右上角(而不是坐在弹出窗口的右上角)。我已经尝试过使用position:
CSS中的值以及围绕堆栈溢出发现的其他属性,但似乎没有一个能解决这个问题。
CSS:
#popup {
position:absolute;
display:hidden;
top:50%;
left:50%;
width:400px;
height:586px;
margin-top:-263px;
margin-left:-200px;
background-color:#fff;
z-index:2;
padding:5px;
}
#overlay-back {
position : fixed;
top : 0;
left : 0;
width : 100%;
height : 100%;
background : #000;
opacity : 0.7;
filter : alpha(opacity=60);
z-index : 1;
display: none;
}
.close-image {
display: block;
float:right;
cursor: pointer;
z-index:3
}
HTML:
<div id="overlay-back"></div>
<div id="popup">
<img class="close-image" src="images/closebtn.png" /><span><img src="images/load_sign.png" width="400" height="566" /></span>
</div>
只需在您的班级上添加位置,就可以了 .close-image
.close-image {
cursor: pointer;
display: block;
float: right;
z-index: 3;
position: absolute; /*newly added*/
right: 5px; /*newly added*/
top: 5px;/*newly added*/
}
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句