On page popup/overlay

Discussion in 'JavaScript' started by mines, Feb 13, 2007.

0
  1. #1
    Hi
    What is the best way to display a div element when someone visits the page, but if they click "Close" it hides it? I want it like an overlay

    thanks
     
    mines, Feb 13, 2007 IP
  2. ccoonen

    ccoonen Well-Known Member

    Messages:
    1,606
    Likes Received:
    71
    Best Answers:
    0
    Trophy Points:
    160
    #2
    have an absolutly positioned (with css) div on top of everything with top:0px; left:0px; width:100%; height:100%; position:absolute; and give it an ID (id="overlay")

    Then have your link or button call a javascript function document.getElementById("overlay").style.display = "none";
     
    ccoonen, Feb 13, 2007 IP
  3. designcode

    designcode Well-Known Member

    Messages:
    738
    Likes Received:
    37
    Best Answers:
    0
    Trophy Points:
    118
    #3
    First make a div after body tag

    
<div id="overlayDiv" style="top:0px; left:0px; width:100%; height:100%; position:absolute;">
My contents here

<a href="#" onclick="toggleDiv('close')">Close</a>
</div>]
    Code (markup):
    Now here is javascript function,
    
<script>
function toggleDiv(display)
{
obj = document.getElementById("overlayDiv");
if(display == "open")
    obj.style.display == "block";
else if((display == "close")
    obj.style.display == "none";
}
</script>
    Code (markup):
    I have not tested it, but it should work fine. If not let me know.
     
    designcode, Feb 13, 2007 IP