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创建关闭按钮：

$('#add_bank_type_dropdown_hidden').val($('#add_bank_type_dropdown_input').val());
            $('#add_bank_type_label_hidden').val($('#add_bank_type_label_input').val());
            $('#add_bank_type_currency_hidden').val($('#add_bank_type_currency_input').val());
            $('#add_bank_type_min_transfer_hidden').val($('#add_bank_type_min_transfer_input').val());
            if ($('#add_bank_type_approved_input').is('checked')) {
                $('#add_bank_type_approved_hidden').val(1);
            } else {
                $('#add_bank_type_approved_hidden').val(0);
            }
            $('#addNewBankAccountForm').submit();

通过关闭按钮

，点击您已更新的JSFiddle

Answer 2

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

我不确定包装div的用途是什么，所以我删除了它。如果您愿意，可以将其添加回来，因为它不会对下面的代码产生任何影响。

＆＃13;

var overlay = $('.overlay'),
    close = $('<div class="close">close</div>');

overlay.append(close);

$(overlay, close).on('click', function () {
    overlay.fadeOut();
});

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

Answer 3

在包装器css中进行更改

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

Fiddle

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*/

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

5 个答案: