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.
How do I set a DIV to be on top of everything else?
Moderator: General Moderators
-
simonmlewis
- DevNet Master
- Posts: 4435
- Joined: Wed Oct 08, 2008 3:39 pm
- Location: United Kingdom
- Contact:
How do I set a DIV to be on top of everything else?
Love PHP. Love CSS. Love learning new tricks too.
All the best from the United Kingdom.
All the best from the United Kingdom.
Re: How do I set a DIV to be on top of everything else?
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
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
-
simonmlewis
- DevNet Master
- Posts: 4435
- Joined: Wed Oct 08, 2008 3:39 pm
- Location: United Kingdom
- Contact:
Re: How do I set a DIV to be on top of everything else?
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>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?
Love PHP. Love CSS. Love learning new tricks too.
All the best from the United Kingdom.
All the best from the United Kingdom.
Re: How do I set a DIV to be on top of everything else?
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>
-
simonmlewis
- DevNet Master
- Posts: 4435
- Joined: Wed Oct 08, 2008 3:39 pm
- Location: United Kingdom
- Contact:
Re: How do I set a DIV to be on top of everything else?
Nice, but I need it to show when the page loads, based on a variable in the URL - not on a click.
Love PHP. Love CSS. Love learning new tricks too.
All the best from the United Kingdom.
All the best from the United Kingdom.
Re: How do I set a DIV to be on top of everything else?
Then simply don't set the initial display value to none and have the timeout fire on load.