Search code examples
javafunctionpopuploadinnerhtml

Pop up and overlay page

I have created a pop up page with an overlay (seperate page loads into div), but my option to close out of the pop up isn't showing up.

Here is the link for the pop-up window: http://jymeross.com/project5.html

How do I get the close window (.cancel class) to appear? The "X" link is currently only showing here: http://jymeross.com/project5.html#loginScreen

Here's the code

<head>

<link rel="stylesheet" href="slider1.css" type="text/css" charset="utf-8" />

<style type="text/css">
.button
{
    width: 150px;
    padding: 10px;
    background-color: #FF8C00;
    box-shadow: -8px 8px 10px 3px rgba(0,0,0,0.2);
    font-weight:bold;
    text-decoration:none;
}
#cover{
    position:fixed;
    top:0;
    left:0;
    background:rgba(0,0,0,0.6);
    z-index:50;
    width:100%;
    height:100%;
    display:none;
}
#gallery
{
    height:525px;
    width:675px;
    margin:0 auto;
    position: relative;
    z-index:100;
    display:none;
    border:5px solid #cccccc;
    border-radius:10px;
}
#gallery:target, #gallery:target + #cover{
    display: block;
    opacity:2;
}
.cancel
{
    display:block;
    position:absolute;
    z-index:100;
    top:3px;
    right:2px;
    height:30px;
    width:35px;
    font-size:30px;
    text-decoration:none;

}
</style>


</head>

<body>


<br><br>
<div align="center">
<a href="#gallery" onclick="load_project1()" class="button">View Gallery</a>

</div><!--close center-->


<div id="gallery">
    <a href="#" class="cancel">&times;</a>
 </div><!--close gallery-->

<div id="cover">
</div>

<script>

    function load_project1() {
     document.getElementById("gallery").innerHTML='<object type="text/html" width="575" height="325" data="project1.html"></object>';
     }

</script>


</body>
Solution

  • Make the sub div under the gallery, and then load the content to the div.

    <div id="gallery">
  <a href="#" class="cancel">&times;</a>
  <div id="gallery-body"></div>
</div>


function load_project1() {
     document.getElementById("gallery-body").innerHTML='<object type="text/html" width="575" height="325" data="project1.html"></object>';
     }

    Then you will keep close link there.