Page 1 of 1
How do I set a DIV to be on top of everything else?
Posted: Mon Nov 11, 2013 9:40 am
by simonmlewis
I have a site where someone makes a payment - it takes them to a page that runs a script, then forwards them to a product page.
I want on that product page to show a div that said "thanks - it's now live".
I've got a DIV that shows for just 5 seconds, but I want it to overlay everything else. It's only a small div.
What do I do wtih the CSS for that one DIV that makes it go over the top of everything else as z-index isn't doing anything at all, not with Position relative or absolute.
Re: How do I set a DIV to be on top of everything else?
Posted: Tue Nov 12, 2013 2:27 am
by Eric!
I usually lightbox something like that with jquery.
However by using a div with style z-index:1; and position: absolute; you can overlay your div on any other div. Z-index determines the order in which divs 'stack'. A div with a higher z-index will appear in front of a div with a lower z-index. Note that this property only works with positioned elements.
BTW did you see my comments about the security issue in your last post:
viewtopic.php?f=1&t=138668&start=15
Re: How do I set a DIV to be on top of everything else?
Posted: Tue Nov 12, 2013 3:13 am
by simonmlewis
Code: Select all
<div id='helpdiv' class='admin' style='display:block'>
Payment has been made - thank you.
</div>
<script type=\"text/javascript\">
// close the div in 5 secs
window.setTimeout(\"closeHelpDiv();\", 5000);
function closeHelpDiv(){
document.getElementById(\"helpdiv\").style.display=\" none\";
}
</script>
I tried this. It works, in that the div pushes in at the top, and when it goes, everything moves back up again.
However, I did try a position absolute, but that seems not to stop the "pushing down" of everything else, I suppose because is it "display: none", then "displayL: block" ??
How can I get around that?
Re: How do I set a DIV to be on top of everything else?
Posted: Tue Nov 12, 2013 6:09 am
by Celauran
Absolute positioning and a higher z-index should do the trick.
Code: Select all
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>DevNet Sandbox</title>
<script>
function showOverlay() {
var overlay = document.getElementById('overlay');
overlay.style.display = 'block';
window.setTimeout(function() { overlay.style.display = 'none'; }, 2000);
}
</script>
<style>
#overlay {
position: absolute;
top: 0px;
left: 0px;
z-index: 22;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.7);
text-align: center;
display: none;
}
</style>
</head>
<body>
<div id="main">
<div id="overlay"><h1>This text is in the overlay</h1></div>
<h2>Main</h2>
<p>This is the main container. The overlay sits on top.</p>
<ul>
<li>I'm a list!</li>
<li>I'm not pushed down!</li>
</ul>
<a href="#" onclick="showOverlay();">Show Overlay</a>
</div>
</body>
</html>
Re: How do I set a DIV to be on top of everything else?
Posted: Tue Nov 12, 2013 6:15 am
by simonmlewis
Nice, but I need it to show when the page loads, based on a variable in the URL - not on a click.
Re: How do I set a DIV to be on top of everything else?
Posted: Tue Nov 12, 2013 6:20 am
by Celauran
Then simply don't set the initial display value to none and have the timeout fire on load.