响应式html叠加在页面顶部，带有关闭按钮

Question

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

我尝试下面的代码：

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

如果我理解正确，则您正在尝试创建一个弹出窗口。 最简单的方法是使用一些不错的jQuery插件，例如THIS

但是，如果您想自己做，则必须将包装器的位置设置为固定，并将该div放在DOM的顶部。

您可以使用jQuery这样关闭按钮：

$('#close').click(function() {
    $(".wrapper").hide();
});

这是更新的带有关闭按钮的JSFiddle

Answer 2

您可以尝试以下操作-它使用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> 

Answer 3

在包装器CSS中进行更改

    .wrapper {
        position:absolute;
        background:red;
        opacity:0.5;
        top:30px;
    }
    .overlaymain {
        position:absolute;
    }

小提琴

Answer 4

嗯，您没有将内容放入包装器中。 我假设包装器是您的常规内容，而overlaymain是您的覆盖物。

http://jsfiddle.net/u0kp6k0x/5/

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

Answer 5

试试这个CSS，它应该可以工作：

.wrapper {
background:red;
    opacity:0.9;
    position:absolute; /*needed*/
    display: block; /*needed*/
    height:350px; /*choose desired height*/
    width: 550px; /*choose desired width*/
    top: 30px; /*distance to page-top*/
    left: 0; /*needed*/
    right: 0; /*needed*/
    margin: auto; /*this centers the div horizontally*/

}

.overlaymain {} /*this is not needed for the overlay*/