在另一个div上叠加一个横幅div,如果可能的话用jQuery [英] Superimpose a banner div over another div, with jQuery if possible
问题描述
我有一个新闻div和一个横幅div。
我希望用户在加载网页时看到横幅div。这个横幅div应该显示在新闻div,正好在位置,覆盖新闻div。所以:
I have a "news" div and a "banner" div.
I want user to see the "banner" div when page loads. This "banner" div should show over the "news" div, exactly over the position, covering the "news" div. So:
-
如何检测新闻div的位置并显示横幅而不影响网格结构?
How should I do to detect position of "news" div and show the "banner" div over, floating, without affecting the grid structure?
任何jQuery插件,允许用户隐藏该div,不再显示? w / cookie?
Any jQuery plugin that allows user to hide that div and never show again? w/ cookie?
希望你了解我的想法。我留下一张图片:
Hope you've understood my idea. I leave an image:
推荐答案
我意识到这个问题已经回答了,但我想我会提供一个替代方案,使用CSS,jQuery和 jQuery Cookie插件:
I realise this question has already been answered, but I thought I'd offer a slight alternative, using CSS, jQuery and the jQuery cookie plugin:
<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:
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:
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});
});
});
一个稍微更美观的演示,用 animate()
:
A slightly more pleasing demo, with 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});
});
});
已编辑你会得到重复的访问者,可能值得重新设置cookie在
如果检查,以确保他们没有看到横幅再次(除非他们留下更多超过30天),将其更改为:
Edited with an afterthought, assuming that you get repeat visitors, it might be worth re-setting the cookie in the initial if
check, to ensure that they don't see the banner ever again (unless they leave more than 30 days between visits), changing it to:
if ($.cookie('closed')){
$('.banner').remove();
$.cookie('closed',true,{expires: 30});
}
这篇关于在另一个div上叠加一个横幅div,如果可能的话用jQuery的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!