Jump to content
Sign in to follow this  
killertofu

Toggle and Hiding In-Page "Pop Ups"

Recommended Posts

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;
}

 

 

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Sign in to follow this  

×