Im setting up a website with a different navigation structure compared to whats traditional, and i want to add a overlay on top of the site which is loaded when the user enters the site the first time.
The overlay should be fullscreen, black "opacity=50", and im going to add simple text about how to use the website. It should also go away when klicking
Im a web designer, and i have limited knowledge in coding. (some css/html/php)
Is there a simple way to add a class for this?
Thanks for feedback
Google it! It's not hard. A very quick Google search brought me 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
});
});
To close the overlay by clicking anywhere you can do the following:
$('#overlay').click(function (e) {
this.remove();
});
Here's a jsFiddle to demonstrate.
Simple enough HTML
<div id='overlay'>
<div id='contents'>...
</div>
The 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;
}
I use an image from the overlay because any opacity setting is carried through to the contents area and no javascript is required or ever needs to be used for this type of content.
Follow this example
<!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>
In this site http://library.creativecow.net/articles/chaffin_abraham/full-page-overlay.php