Наложите баннерный div на другой div, с jQuery, если это возможно

Question

У меня есть div "news" и div "banner".
Я хочу, чтобы пользователь видел div "banner" при загрузке страницы. Этот div "баннера" ​​должен отображаться поверх div "news", точно над позицией, охватывающей div "news". Итак:

• Как мне сделать, чтобы определить положение div "news" и показать div "banner" над плавающей точкой, не затрагивая структуру сетки?

• Любой плагин jQuery, который позволяет пользователю скрыть этот div и больше никогда не показывать? с печеньем?

Надеюсь, вы поняли мою идею. Я оставляю изображение:

Answer 1

Я написал скрипт для вас, который должен помочь.

Он использует плагин Cookie для jQuery.

У меня естьдобавьте некоторые комментарии в код, так что, надеюсь, это будет довольно понятно.

Не стесняйтесь возвращаться с другими вопросами, которые могут у вас возникнуть.

Использование При первой загрузке вы должны увидеть баннер, затем снова нажать «Выполнить», и он должен исчезнуть.Баннер будет размещен на точно над списком новостей, используя абсолютное позиционирование, ширину / высоту и верхнее / левое смещение списка новостей.

Answer 2

используйте смещение jquery http://api.jquery.com/offset/

и показ и скрытие jquery http://api.jquery.com/show/

вы можете использовать отрицательное поле для баннера, чтобы перейти к новостям ... div.

Дайте мне знать, если вам что-нибудь понадобится ...

используйте абсолютное позиционирование для баннера новостей.

Answer 3

Я понимаю, что на этот вопрос уже дан ответ, но я подумал, что предложу небольшую альтернативу, используя CSS, jQuery и плагин jQuery cookie :

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 .

Немного более приятное демо, с 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});
            });
    });

Демонстрация на JS Fiddle

<ч /> Отредактировано с запоздалой мыслью, если предположить, что вы получаете повторных посетителей, возможно, стоит переустановить cookie в начальной проверке if, чтобы они больше никогда не видели баннер (если только оставьте более 30 дней между визитами), изменив его на:

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