Toggle and Hiding In-Page "Pop Ups"

killertofu · May 10, 2018

Hello!
I'm trying to put together a small portfolio website for school, and I'm having some issues.

My design is basically a one-page layout, where the viewer presses a button, and a 'pop up' appears - in page (using an onClick command) . I would like to make the button on the splash/index page toggle-able, but I'm having problems and am wondering where I can go with this. I had issues when searching around online.

My next issue is 'exiting out of the popups' - or hiding the block that appears when pressing a trigger (the trigger being the [x]) . I can't seem to be able to hide them! So far, I've tried to use

Quote

<div id="NAME" onClick="close()">[x]</div>

I've included screenshots, and code! I'm working with my HTML and CSS separately, as per how our instructor taught us. Our instructor didn't get into any features that I'm trying to do, so I'm a little lost.
Thank you!

http://oi68.tinypic.com/2aac2h2.jpg
http://oi66.tinypic.com/xbn86s.jpg

Quote

<link rel="stylesheet" type="text/css" href="style1.css">

   <script type="text/javascript">
       function popup(){
           document.getElementById("popup-index").style.visibility = "visible"; }

       function popup2(){
           document.getElementById("popup-work").style.visibility = "visible"; }

       function popup3(){
           document.getElementById("popup-artist").style.visibility = "visible"; }

       function popup4(){
           document.getElementById("popup-contact").style.visibility = "visible"; }

       function close(){
           document.getElementById("popup-index").style.visibility = "hidden"; }
   </script>
</head>
<body>
   <div class="container">
   <div class="images">

   <img src="gifbutton/splashenter.gif" alt="ENTER" id="enter" onclick="popup()"></img>

   <div id="popup-index">
       <h1>Navigation //</h1>

       <div id="exit1" onClick="close()">[x]</div>

       <ul>
           <li><id="portfolio" onclick="popup2()">WORK</li>

   <div id="popup-work">
           <h1>Work</h1>

       <div id="exit2" onClick="close()">[x]</div>
           <div class="container-work">

           <div class="images1">

..........................

Quote

* {
   margin: 0;
   padding: 0;
}
body {
   cursor:crosshair;
   width: 100%;
   height: 100%;
   background-color:#ffffff;
}

.container {
   width:50%;
   height: auto;
   background-color:white;
   margin: 0 auto;
}
#exit1 {
   float: right;
   padding:10px;
   background-color: yellow;
   width: 20px;
   margin-right: 20px;
   z-index: 999;
}

#exit2 {
   float: right;
   padding:10px;
   background-color: yellow;
   width: 20px;
   margin-right: 20px;
   z-index: 999;
}

#exit3 {
   float: right;
   padding:10px;
   background-color: yellow;
   width: 20px;
   margin-right: 20px;
   z-index: 999;
}

.images {
   display: block;
    margin-left: 40%;
    margin-right: 50%;
    margin-top: 50%;
   }

#enter {
   cursor: pointer;
}

#popup-index {
   cursor:crosshair;
   font-family: 'Overpass Mono', monospace;
   width:700px;
   height:400px;
   background-color: teal;
   position: absolute;
   top:200px;
   left:300px;
   visibility: hidden;
}

#popup-index h1 {
   text-align: center;
   padding: 20px;
}

#popup-index ul li {
   list-style-type: none;
   padding-left: 20px;
   font-size: 16pt;
   color:white;
   font-weight: bold;
}

#popup-work {
   font-family: 'Overpass Mono', monospace;
   width:60%;
   height:3000px;
   background-color: pink;
   position: absolute;
   top:-130px;
   left:1000px;
   visibility: hidden;
}

#container-work {
        border: 5px solid gray;
        padding: 5px;
        background: white;
        width: 300px;
        height: 400px;
        overflow-y: scroll;
    }
#popup-work img {
   align-items: left;
}
#popup-work h1 {
   text-align:center;
   padding: 20px;
}
.container-work {
   max-width:400px;
   max-height: 600px;
   margin: 50 auto;
   position: absolute;
}

.images1 {
   position: static;
   display: inline-block;
   width:50%;
   height:50%;
   padding-top:20%;

   }

.images2 {
   position: static;
   display: inline-block;
   max-width:50%;
   height:50%;
}

.images1 {
   position: static;
   display: inline-block;
   max-height: 50%;
   max-width: 50%;
   padding-top:20%;

   }

#portfolio {cursor: pointer;}

#popup-contact {
   font-family: 'Overpass Mono', monospace;
   width:900px;
   height:150px;
   background-color: #B0A2EC;
   position: absolute;
   bottom:100;
   left: 40px;
   visibility: hidden;
   cursor: crosshair;
}

#popup-artist {
   font-family: 'Overpass Mono', monospace;
   width:950px;
   height:200px;
   background-color: #ffffC6;
   position: absolute;
   top:410px;
   right:0px;
   visibility: hidden;
}
.container-artist {
   max-width:400px;
   max-height: 600px;
   margin: 900 auto;
   position: absolute;
}

Sign In

Toggle and Hiding In-Page "Pop Ups"

Recommended Posts

killertofu

Link to comment

Share on other sites

Create an account or sign in to comment

Create an account

Sign in

Browse

Activity