javascript - 带有关闭按钮的响应式 html 覆盖在页面顶部

Question

我正在尝试创建响应式 html 叠加层(其中包含一个图像和关闭按钮)。它应该从页面顶部向下 30 像素。

我试过下面的代码:

html

<div class="wrapper">
    <div class="overlaymain">
        <img class="overlayimage" src="http://assets.cobaltnitra.com/teams/repository/export/v/1/391/435a06bcb100589f410145edef087/391435a06bcb100589f410145edef087.png">
    </div>
</div>

CSS

.wrapper {
    position:relative;
    height:100%;
    background:red;
    opacity:0.9;
}
.overlaymain {
    top:30px;
    position:absolute;
}

jsfiddle

我无法让它工作。

Answer 1

您可以尝试以下方法 - 它使用 css3 使叠加图像保持居中(使用下面代码段中的完整页面链接并调整浏览器大小进行测试)并且应该适用于所有主要浏览器。

我不确定 wrapper div 是做什么用的，所以我删除了它。如果需要，您可以将其添加回去，因为它对下面的代码没有任何影响。

var overlay = $('.overlay'),
    close = $('<div class="close">close</div>');

overlay.append(close);

$(overlay, close).on('click', function () {
    overlay.fadeOut();
});

.overlay {
    position:fixed;
    left:0;
    right:0;
    top:30px;
    bottom:0;
    background:rgba(255, 0, 0, 0.7); /* use this so that the image doesn't go opaque too */
}
.overlay > img {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); /* center the image in the overlay */
}
.close {
    border-radius:5px;
    color:#ffffff;
    background-color:#000000;
    display:inline-block;
    padding:5px 10px;
    position:absolute;
    bottom:10px;
    right:10px;
    cursor:pointer;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
watsapppwatsapppwatsappp
<br>
<br>watsapppwatsapppwatsappp
<div class="overlay">
    <img class="overlayimage" src="http://assets.cobaltnitra.com/teams/repository/export/v/1/391/435a06bcb100589f410145edef087/391435a06bcb100589f410145edef087.png">
</div>