Question

我设置了一个与传统网站相比具有不同导航结构的网站，我想在网站顶部添加一个叠加层，当用户第一次进入该网站时，该叠加层会被加载。

叠加层应该是全屏，黑色“opacity = 50”，我将添加有关如何使用网站的简单文字。点击

时它也应该消失

我是网页设计师，我对编码知识有限。（有些css / html / php）

有没有一种简单的方法可以为此添加一个类？

感谢您的反馈

Answer 1

足够简单 HTML

<div id='overlay'>
  <div id='contents'>...
</div>

CSS：

#overlay {
  background-image : url('images/overlay.png');
  width:100%;
  height:100%;
  position: fixed;
  top: 0;
  left: 0;
}

#contents {
  width: 300px;
  height: 300px;
  margin: auto;
}

我使用叠加层中的图像，因为任何不透明度设置都会传递到内容区域，不需要使用javascript或者需要使用此类型的内容。

Answer 2

谷歌吧！这并不难。非常快速的Google搜索为我带来了here：

$(function() {
    var docHeight = $(document).height();
    $("body").append("<div id='overlay'></div>");
    $("#overlay").height(docHeight).css({
        'opacity' : 0.4,
        'position' : 'absolute',
        'top' : 0,
        'left' : 0,
        'background-color' : 'black',
        'width' : '100%',
        'z-index' : 5000
    });
});

要通过点击任意位置关闭叠加层，您可以执行以下操作：

$('#overlay').click(function (e) {
    this.remove();
});

这是一个jsFiddle来演示。

Answer 3

请按照此示例

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<head>
<style>
#displaybox {
    z-index: 10000;
    filter: alpha(opacity=50); /*older IE*/
    filter:progid:DXImageTransform.Microsoft.Alpha(opacity=50); /* IE */
    -moz-opacity: .50; /*older Mozilla*/
    -khtml-opacity: 0.5;   /*older Safari*/
    opacity: 0.5;   /*supported by current Mozilla, Safari, and Opera*/
    background-color:#000000;
    position:fixed; top:0px; left:0px; width:100%; height:100%; color:#FFFFFF; text-align:center; vertical-align:middle;
}
</style>
<script>
function clicker(){
    var thediv=document.getElementById('displaybox');
    if(thediv.style.display == "none"){
        thediv.style.display = "";
        thediv.innerHTML = "<table width='100%' height='100%'><tr><td align='center' valign='middle' width='100%' height='100%'><object classid='clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B' codebase='http://www.apple.com/qtactivex/qtplugin.cab' width='640' height='500'><param name='src' value='http://cowcast.creativecow.net/after_effects/episodes/Shape_Tips_1_POD.mp4'><param name='bgcolor' value='#000000'><embed src='http://cowcast.creativecow.net/after_effects/episodes/Shape_Tips_1_POD.mp4' autoplay='true' pluginspage='http://www.apple.com/quicktime/download/' height='500' width='640' bgcolor='#000000'></embed></object><br><br><a href='#' onclick='return clicker();'>CLOSE WINDOW</a></td></tr></table>";
    }else{
        thediv.style.display = "none";
        thediv.innerHTML = '';
    }
    return false;
}
</script>
</head>
<body>
<div id="displaybox" style="display: none;"></div>
<a href='#' onclick='return clicker();'>Open Window</a>
</body>

在此网站http://library.creativecow.net/articles/chaffin_abraham/full-page-overlay.php

CSS - 加载页面时的网站覆盖

3 个答案: