我正在设置一个与传统导航结构不同的网站，我想在用户第一次进入网站时加载的网站顶部添加一个覆盖。
覆盖应该是全屏的，黑色的“opacity=50”，我将添加关于如何使用网站的简单文字。点击时它也应该消失
我是一名网页设计师，但我的编码知识有限。 (一些css/html/php)
有没有一种简单的方法可以为此添加一个类？
感谢反馈
【问题讨论】：
足够简单 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 用于此类内容。
【讨论】：
按照这个例子进行
<!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
【讨论】：
谷歌！这并不难。 非常快速的谷歌搜索给我带来了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 来演示。
【讨论】：