Question

我有一个“新闻”div和一个“banner”div 我希望用户在页面加载时看到“banner”div。这个“横幅”div应该显示在“新闻”div上，正好在位置上，覆盖“新闻”div。所以：

我该如何检测“news”div的位置并显示“banner”div，浮动，而不影响网格结构？
任何jQuery插件，允许用户隐藏该div而不再显示？带饼干？

希望你明白我的想法。我留下一张图片：

Image describing my problem

Answer 1

使用jquery的偏移量 http://api.jquery.com/offset/

和jquery的展示和隐藏 http://api.jquery.com/show/

您可以使用横幅的负余量来转到新闻... div。

如果您需要任何帮助，请告诉我......

使用绝对位置作为新闻横幅。

Answer 2

我written a script对你有帮助。

它使用Cookie plugin作为jQuery。

我在代码中添加了一些注释，所以希望它应该是非常明显的。

随时回答您可能遇到的其他问题。

用法
你应该在第一次加载时看到一个横幅，然后再次单击再次运行，它应该消失横幅将使用绝对定位，新闻列表的宽度/高度和顶部/左侧偏移位于新闻列表上方完全。

Answer 3

我意识到这个问题已经得到了解答，但我认为我会提供一个小的替代方案，使用CSS，jQuery和jQuery cookie plugin：

HTML：

<div class="container">
    <div class="news">
        <p>Lorem ipsum dolor sit amet...</p>
    </div>
    <div class="banner">
        <p>Yet more text, this time it's the banner.</p>
        <span class="close">X</span>
    </div>
</div>
<div id="clear">Remove the cookie</div>

的CSS：

.container {
    width: 80%;
    min-height: 400px;
    position: relative;
    border: 4px solid #000;
}
.news {
    width: 100%;
    height: 100%;
}

.banner {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #f00;
}
.close {
    position: absolute;
    top: 0;
    right: 0;
    border-left: 2px solid #fff;
    border-bottom: 2px solid #fff;
    width: 2em;
    line-height: 2em;
    text-align: center;
    display: block;
    cursor: pointer;
}
#clear {
    width: 80%;
    text-align: right;
    color: #fff;
    background-color: #999;
    border: 4px solid #000;
    border-top-width: 0;
    font-family: arial, sans-serif;
    cursor: pointer;
}

jQuery的：

$(document).ready(

function(){
    if ($.cookie('closed')){
        $('.banner').remove();
    }
    $('.close').click(
        function(){
            $(this).closest('.banner').remove();
            $.cookie('closed',true, {expires: 30});
        });
    $('#clear').click(
        function(){
            $.cookie('closed',false, {expires: -200});
        });
});

JS Fiddle demo

一个稍微令人满意的演示，animate()：

$(document).ready(
    function(){
        if ($.cookie('closed')){
            $('.banner').remove();
        }
        $('.close').click(
            function(){
                $(this)
                    .closest('.banner')
                    .animate(
                        {
                            'top':'120%'
                        }, 1500,
                        function(){
                            $(this).remove();
                        }
                    );
                $.cookie('closed',true, {expires: 30});
            });
        $('#clear').click(
            function(){
                $.cookie('closed',false, {expires: -200});
            });
    });

Demo at JS Fiddle

<小时/> 已编辑以及事后的想法，假设您有重复访问者，可能需要在初始if检查中重新设置Cookie，以确保他们不会再次看到横幅广告（除非他们在两次访问之间离开超过30天），将其更改为：

if ($.cookie('closed')){
    $('.banner').remove();
    $.cookie('closed',true,{expires: 30});
}

如果可能的话，用jQuery叠加另一个div的横幅div

3 个答案:

HTML：

的CSS：

jQuery的：