20

私は最近、以前の Web 開発者が作成した JS ポップアップをコピーする仕事を割り当てられました。私はそれを非常によく似ていますが、閉じるボタン（X）が（ポップアップの右上隅に座っているのではなく）ポップアップの右上隅に浮かんでいるため、取得できないことが1つあります。CSS の値とスタック オーバーフローの周りで見つけたその他の属性を試してみposition:ましたが、どれもうまくいかないようです。

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>
4

5 に答える 5

31

クラスに位置、右、上を追加するだけです.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*/
}
于 2013-07-15T11:13:25.787 に答える
4

このCSSを使用

.close-image {
    cursor: pointer;
    z-index: 3;
    right: 5px;
    top: 5px;
    position: absolute;
}
于 2013-07-15T11:07:43.937 に答える
0

どうですか：

.close-image{
    display:block;
    cursor:pointer;
    z-index:3;
    position:absolute;
    top:0;
    right:0;
}

それは望ましい結果ですか？

于 2013-07-15T11:07:35.087 に答える