Question

我一直在拼凑代码并将其推文最终与此结合在一起。代码本身相当简单，基本上只是说一旦有人第一次访问该页面，就会丢弃一个cookie，当他访问该页面时，不再为访问者显示它，以及365天。我唯一的问题是，一旦div加载并加载，我无法弄清楚如何淡入和淡出背景，我只能淡化div本身。我已经尝试将它包装在叠加div中，但我认为我接近它是错误的。代码在这里看起来有点多，所以我附上了一个jsfiddle用于一个工作示例：http://jsfiddle.net/newbieturd/F29uv/

**注意：一旦你操作小提琴，你将不得不清除你的cookie。 DIV只出现一次

CSS：

#welcome {
  box-sizing:border-box;
  padding:34px 18px 18px 18px;
  height:120px;
  width:300px;
  background:Salmon;
  color:#f9f9f9;
  border-radius:6px;
  position:absolute;
  top:50%;
  left:50%;
  margin:-60px 0 0 -150px;
  font:300 normal 1.4em/1.2 'Signika', sans-serif;
  display:none;
}
#close {
  height:30px;
  width:30px;
  background:url('http://www.omagdigital.com/images/articles/WebArticle-CloseButton.png') no-repeat;
  position:absolute;
  top:2px;
  right:2px;
  cursor:pointer;
}

JS：

<script type='text/javascript'>//<![CDATA[ 
$(window).load(function(){
(function(factory){if(typeof define==='function'&&define.amd){define(['jquery'],factory);}else{factory(jQuery);}}(function($){var pluses=/\+/g;function raw(s){return s;}function decoded(s){return decodeURIComponent(s.replace(pluses,' '));}function converted(s){if(s.indexOf('"')===0){s=s.slice(1,-1).replace(/\\"/g,'"').replace(/\\\\/g,'\\');}try{return config.json?JSON.parse(s):s;}catch(er){}}var config=$.cookie=function(key,value,options){if(value!==undefined){options=$.extend({},config.defaults,options);if(typeof options.expires==='number'){var days=options.expires,t=options.expires=new Date();t.setDate(t.getDate()+days);}value=config.json?JSON.stringify(value):String(value);return(document.cookie=[config.raw?key:encodeURIComponent(key),'=',config.raw?value:encodeURIComponent(value),options.expires?'; expires='+options.expires.toUTCString():'',options.path?'; path='+options.path:'',options.domain?'; domain='+options.domain:'',options.secure?'; secure':''].join(''));}var decode=config.raw?raw:decoded;var cookies=document.cookie.split('; ');var result=key?undefined:{};for(var i=0,l=cookies.length;i<l;i++){var parts=cookies[i].split('=');var name=decode(parts.shift());var cookie=decode(parts.join('='));if(key&&key===name){result=converted(cookie);break;}if(!key){result[name]=converted(cookie);}}return result;};config.defaults={};$.removeCookie=function(key,options){if($.cookie(key)!==undefined){$.cookie(key,'',$.extend({},options,{expires:-1}));return true;}return false;};}));

function setCookie() {
  $.cookie("visited", "true", { expires: 365 });
}

if ($.cookie('visited') != 'true') {
  $('#welcome').show(1800);
  setCookie();
} else {
  $('#welcome').remove();
}

$('#close').click(function() {
  $('#welcome').hide(1800);
});

// $.cookie("visited", null);
});//]]>  

</script>

HTML：

  <div id="welcome">
  <span id="close"></span>
  Interstitial Message. You will only see this message once every 365 days.
</div>
  <p> Hello World. </p>

Answer 1

这是你在找什么？我给弹出窗口提供了一个父容器，用作叠加层。

HTML：

<div class="overlay">
    <div id="welcome">
      <span id="close"></span>
      This is the only time you will see this message :)
    </div>
</div>

CSS：

.overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.4);
    z-index: 99;
}

jQuery：

if ($.cookie('visited') != 'true') {
  $('#welcome, .overlay').show(100); // If the condiditon is true then show overlay
  setCookie();
} else {
  $('#welcome').remove();
}

$('#close').click(function() {
  $('#welcome').hide(100); // Can also be added to this jQuery selector but the animation was odd
    $('.overlay').fadeOut(100); // Fades out on click
});

最后小提琴：DEMO

Answer 2

将#welcome div设为z-index（例如11）并添加css以使文档正文具有高度和宽度：

html, body {
height: 100%;
width: 100%;
}

您将要向主体添加一个玻璃窗格div，它需要一个高度和宽度来填充页面的主体，在当前示例中，它没有设置高度或宽度

然后添加一个背景div，其中包含您选择的颜色以及小于#welcome div的z-index，如：

<div id="glass_pane" style="width: 100%; height: 100%; z-index: 10; position: absolute: top: 0px; left: 0px; background-color: #000;"></div>

Ans然后将其淡入或淡出，在您喜欢时将其删除，更改透明度

一旦div关闭，如何使页面的其余部分淡化为黑色并在div关闭后逐渐淡出？

2 个答案: