-5

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

覆盖应该是全屏的，黑色的“opacity=50”，我将添加关于如何使用网站的简单文本。敲击时它也应该消失

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

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

感谢您的反馈

4

3 回答 3

2

足够简单的 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 用于此类内容。

于 2013-09-04T13:10:12.420 回答
1

去谷歌上查询！这并不难。一个非常快速的谷歌搜索把我带到了这里：

$(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来演示。

于 2013-09-04T13:05:35.087 回答
1

按照这个例子

<!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

于 2013-09-04T13:22:04.790 回答