BarrelPony BarrelPony - 3 months ago 9
CSS Question

When I click on image popup, it appears at the bottom instead of over the top

I am trying to code a modal image gallery. I found an html code for one, that includes a little JS, but it doesn't come with any CSS. So when I click on the image, (currently only the top left one is linked up) the modal shows up at the bottom. I know nothing about JS or modals, could someone help me with what sort of code I would need to make the modal pop up over top of everything? Thanks in advance!



@font-face {
font-family: Gudea;
src: url(https://www.google.com/fonts#UsePlace:use/Collection:Gudea:400,400italic,700);
}

h1, h2, h3, h4, h5, h6, p {
margin: 0;
padding: 0;
}

p {
margin: 0 0 1em 0;
font-size: 93%;
line-height: 1.5em;
}

body {
font-family: Helvetica, Arial, sans-serif;
padding: 0;
margin: 0;
background-image: url(http://oi68.tinypic.com/9tzv4n.jpg);
}

img {
max-width: 100%;
height: auto;
margin: 0 0 10px 0;
}

/* Section Inner */
div.section-inner {
max-width: 1100px;
padding: 0 25px;
margin: 0 auto;
}

/* Header */
div.header {
background-image: url(http://oi67.tinypic.com/33dfi86.jpg);
margin-top:40px;
height: 30px;
background-color: #E9E9E9;
padding: 40px 0;
}


/*Logo*/

h1 span {
position: absolute;
top: 97px;
left: 50%;
width: 402px;
height: 160px;
margin: -80px 0 0 -201px;
text-indent: -999em;
z-index: 99;
background: url(http://www.cutcodedown.com/for_others/barrelPony/sandmannFarm/images/h1Logo.png);
}

/*Satooth Pattern*/

h2 span {
position: absolute;
top: 140px;
height: 20px;
text-indent: -999em;
z-index: 90;
background: url(http://i1377.photobucket.com/albums/ah69/danalavelle3/Sawtooth_zps67oxpl7p.png);
background-repeat: repeat-x;
width: 100%;
}


/*Sawtooth Pattern Two*/

h3 span {
position: absolute;
margin-top: -30px;
height: 40px;
text-indent: -999em;
z-index: 90;
background: url(http://i1377.photobucket.com/albums/ah69/danalavelle3/Sawtooth_zps67oxpl7p.png);
background-repeat: repeat-x;
width: 100%;
}



/* Navigation */

#mainMenuCheck {
/* display none breaks this in some browsers, so just slide it out of view */
position:absolute;
left:-999em;
}

#mainMenu {
position:relative; /* depth sort over h1 */
background:#754 url(images/dots.png) top left;
padding:0.40em 0.75em 0.05em;
/* left margin adjusts for uneven menu width, change as needed */
text-align:center;
}

#mainMenu li {
list-style:none;
display:inline;
}

#mainMenu ul:before,
#mainMenu ul:after,
#mainMenu:after,
#mainMenu a {
color:#F0E8E0;
text-shadow:
0 0 2px #000,
2px 2px 2px #000,
2px 2px 3px #000;
}

#mainMenu a {
display:inline-block;
vertical-align:bottom;
text-decoration:none;
color:#F0E8E0;
-webkit-transition:color 0.3s, text-shadow 0.3s;
transition:color 0.3s, text-shadow 0.3s;
}

#mainMenu a.current {
color:#87C6BC;
}

#mainMenu a:active,
#mainMenu a:focus,
#mainMenu a:hover {
color:#87C6BC;
}

#mainMenu a:after {
display:inline-block;
padding:0 0.1em 0 0.5em;
color:#FFF;
}

#mainMenu .lastInSet a:after {
display:none;
}

#mainMenu .setBreak {
padding-right:8em;
}

#mainMenu a:after,
#mainMenu:after,
#mainMenu ul:before,
#mainMenu ul:after {
content:"\2605";
font-family:"arial unicode ms","dejavu sans",lastresort,sans-serif;
}

#mainMenu:after,
#mainMenu ul:before,
#mainMenu ul:after {
position:absolute;
left:50%;
width:3em;
bottom: 1em;
}

#mainMenu:after {
bottom:0.3em;
font-size:150%;
margin-left:-1.5em;
}

#mainMenu ul:before {
margin-left:-3em;
}



/* Body Content */
div.body-content {
padding: 50px 0;
background-image: url(http://i1377.photobucket.com/albums/ah69/danalavelle3/Page_zpscom5uhou.png);
font-family: Gudea;

}

div.center{
width:100%;

}

/*
#heart-header {
width: 50%;
height:auto;
margin-left: auto;
margin-right: auto;
display: block;
}



/*float left*/ .left { float: left; /*left in our text*/ margin: 20px; /*space around the image*/
}

/*float left*/ .right { float: right; margin: 20px; /*space around the image*/
}

@media screen and (max-width: 793px){
.left{
margin:0;
width:100%;
display: block;
float: none;
}
.right{
margin:0 auto;
width:75%;
display: block;
float: none;
}

}


}




/*
div.center h2 {
margin: 0;
font-size: 30px;
font-size: 3.5vw;
font-family: Gudea;
font-weight: bold;
position: absolute;
top:60%;
left: 50%;
margin-right: -50%;
transform: translate(-50%, -50%) }




/* Thirds */


div.thirds {
padding-bottom: 50px;
text-align: center;
font-family: Gudea;
}

div.button1 {
width:90px;
height:40px;
margin-left: 38%;
}

div.one-third {
width: 30%;
float: left;
margin-right: 5%;
text-align: center;
font-family: Gudea;
}

div.button2 {
width:90px;
height:40px;
margin-left: 38%;
}

div.one-third-last {
margin: 0;
text-align: center;
font-family: Gudea;

}

div.button3 {
width:90px;
height:40px;
margin-left: 38%;
}

/*Level Two*/

div.four {
padding-bottom: 50px;
text-align: center;
font-family: Gudea;
}

div.button4 {
width:90px;
height:40px;
margin-left: 38%;
}

div.five {
width: 30%;
float: left;
margin-right: 5%;
text-align: center;
font-family: Gudea;
}

div.button5 {
width:90px;
height:40px;
margin-left: 38%;
}

div.six {
margin: 0;
text-align: center;
font-family: Gudea;

}

div.button6 {
width:90px;
height:40px;
margin-left: 38%;
}


.flex {
padding: 4px;
display: flex;
flex-wrap: wrap;
}

.flex {
padding: 4px;
margin-right: 2%;
display: flex;
flex-wrap: wrap;
}
.item {
width: 30%;
margin-left:3%;
margin-bottom: 20px;
text-align: center;
}



/**/

h2 {
color:#4EB4AC;
font-family: Gudea;
font-size: 20px;

}



/* Main Column */
div.main {
width: 100%;
float: left;
margin-top: -30px;
margin-right: 5%;
text-align: center;
font-family: Gudea;
position: relative;

}

/* Footer */
div.footer {
background-image: url(http://oi67.tinypic.com/33dfi86.jpg);
margin-top: 30px;
margin-bottom: 30px;
color: #FFF;
padding: 15px 0;
text-align: center;
}


.clearfix:before, .clearfix:after { content: ""; display: table; }
.clearfix:after { clear: both; }
.clearfix { *zoom: 1; }

/*Mobile Nav*/

@media (min-width:900px) {

.header2 {
display: none;
}

.menu {
display: none;
}


}

@media (max-width:900px) {

body {
z-index: 100;
margin:;
font-family: font:bold 16px/18px arial,helvetica,sans-serif;
background-color: #f4f4f4;


}

a {
color: #F8F4E6;
text-shadow:
0 0 5px #000,
5px 5px 5px #754;
}

.menu a:before,
.menu ul:before,
.menu ul:before {
content:"\2605";

}


/* header */

.header2 {
background-color:#6A4E39;
box-shadow: 1px 1px 4px 0 rgba(0,0,0,.1);
position: relative;
width: 100%;
z-index: 3;


}

.header2 ul {
margin: 0;
padding: 0;
list-style: none;
overflow: hidden;
background-image:none;

}

.header2 li a {
display: block;
padding: 20px 20px;
border-right: 1px solid #f4f4f4;
text-decoration: none;
}

.header2 li a:hover,
.header2 .menu-btn:hover {
background-color:#4EB4AC;

}

.header2 .logo {
display: block;
float: left;
font-size: 15px;
padding: 10px 20px;
margin-top: 15px;
text-decoration: none;
}

/* menu */

.header2 .menu {
clear: both;
max-height: 0;
transition: max-height .2s ease-out;

}

/* menu icon */

.header2 .menu-icon {
cursor: pointer;
display: inline-block;
float: right;
padding: 28px 20px;
position: relative;
user-select: none;
}

.header2 .menu-icon .navicon {
background: #F8F4E6;
display: block;
height: 2px;
position: relative;
transition: background .2s ease-out;
width: 18px;
}

.header2 .menu-icon .navicon:before,
.header2 .menu-icon .navicon:after {
background: #F8F4E6;
content: '';
display: block;
height: 100%;
position: absolute;
transition: all .2s ease-out;
width: 100%;
margin-top: 7px;
}

.header2 .menu-icon .navicon:before {
top: 03px;
}

.header2 .menu-icon .navicon:after {
top: -2px;
}

/* menu btn */

.header2 .menu-btn {
display: none;
}

.header2 .menu-btn:checked ~ .menu {
max-height: none;
}

.header2 .menu-btn:checked ~ .menu-icon .navicon {
background: transparent;
}

.header2 .menu-btn:checked ~ .menu-icon .navicon:before {
transform: rotate(-45deg);
}

.header2 .menu-btn:checked ~ .menu-icon .navicon:after {
transform: rotate(45deg);
}

.header2 .menu-btn:checked ~ .menu-icon:not(.steps) .navicon:before,
.header2 .menu-btn:checked ~ .menu-icon:not(.steps) .navicon:after {
top: 0;
}
}

/* 48em = 768px */


@media (max-width: 899px) {
#mainMenu {
display: none;
justify-content: center;
}


/* section */

.section {
overflow: hidden;
margin: auto;
max-width: 1400px;
}

.section a {
position: relative;
float: left;
width: 100%;
}

.section a img {
width: 100%;
display: block;
}

.section a span {
color: #fff;
position: absolute;
left: 5%;
bottom: 5%;
font-size: 2em;
text-shadow: 1px 1px 0 #000;
}

.section-split a span {
display: none;
}

.section-split a:hover span {
display: block;
}


/* 48em = 768px */

@media (min-width: 48em) {
.section-split a {
width: 50%;
}
}

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

<title>Sandmann Farm</title>

<meta name="viewport" content="width=device-width">

<!-- css -->
<link rel="stylesheet" href="css/main.css">

<link rel="stylesheet" href="css/responsive.css" media="screen and (max-width: 900px)">




</head>
<body>

<!--Logo-->

<h1>
<a href="/">

<span>-</span>

</a>
</h1>

<!--Sawtooth Pattern-->

<h2>
<a href="/">

<span>-</span>

</a>
</h2>


<!-- Header -->
<div class="header"><div class="section-inner">

</div></div>

<!-- Navigation -->
<div id="container">


<input type="checkbox" id="mainMenuCheck">
<label for="mainMenuCheck"></label>

<div id="mainMenu">
<ul>

<li><a href="index.html" class="current">Home</a></li>
<li><a href="about.html">About</a></li>
<li><a href="whatwedo.html">What We Do</a></li>
<li class="lastInSet setBreak"><a href="events.html">Events</a></li>

<li><a href="successstories.html">Success Stories</a></li>
<li><a href="contact.html">Contact</a></li>
<li><a href="photos.html">Photos</a></li>
<li class="lastInSet"><a href="/blog/">Blog</a></li>

</ul>

</div>

<!--Mobile Navigation-->

<link href="http://fonts.googleapis.com/css?family=Droid+Serif" rel="stylesheet" type="text/css" />
<header class="header2">
<a href="/" class="logo">Navigation</a>
<input class="menu-btn" type="checkbox" id="menu-btn" />
<label class="menu-icon" for="menu-btn"><span class="navicon"></span></label>
<ul class="menu">
<li><a href="#work"> Home</a></li>
<li><a href="#about"> About</a></li>
<li><a href="#careers"> What We Do</a></li>
<li><a href="#about"> Events</a></li>
<li><a href="#contact"> Success Stories</a></li>
<li><a href="#contact"> Contact</a></li>
<li><a href="#contact"> Photos</a></li>
<li><a href="#contact"> Blog</a></li>
</ul>
</header>

<!-- Body-Content -->
<div class="body-content"><div class="section-inner">
<div class="flex">
<div class="item">
<div><img src="http://static1.squarespace.com/static/5461836ee4b073a05b541f40/t/548df630e4b023e5238f8546/1418589745114/0image.jpg" style="width:100%;cursor:pointer"
onclick="onClick(this)" class="w3-hover-opacity"></div>
<div class="button3">

</div>
</div>
<div class="item">
<div><img src="http://static1.squarespace.com/static/5461836ee4b073a05b541f40/t/548df630e4b023e5238f8546/1418589745114/0image.jpg"></div>
<div class="button3">

</div>
</div>
<div class="item">
<div><img src="http://static1.squarespace.com/static/5461836ee4b073a05b541f40/t/548df630e4b023e5238f8546/1418589745114/0image.jpg"></div>
<div class="button3">

</div>
</div>
<div class="item">
<div><img src="http://static1.squarespace.com/static/5461836ee4b073a05b541f40/t/548df630e4b023e5238f8546/1418589745114/0image.jpg"></div>
<div class="button3">

</div>
</div>
<div class="item">
<div><img src="http://static1.squarespace.com/static/5461836ee4b073a05b541f40/t/548df630e4b023e5238f8546/1418589745114/0image.jpg"></div>
<div class="button3">

</div>
</div>
<div class="item">
<div><img src="http://static1.squarespace.com/static/5461836ee4b073a05b541f40/t/548df630e4b023e5238f8546/1418589745114/0image.jpg"></div>

</div>
</div>

</div>

<div id="modal01" class="w3-modal" onclick="this.style.display='none'">
<span class="w3-closebtn w3-hover-red w3-text-white w3-xxlarge w3-container w3-display-topright">&times;</span>
<div class="w3-modal-content w3-animate-zoom">
<img id="img01" style="width:100%">
</div>
</div>

<script>
function onClick(element) {
document.getElementById("img01").src = element.src;
document.getElementById("modal01").style.display = "block";
}
</script>


</div></div><!--/body-content-->


<!--Sawtooth Pattern Two-->

<h3>
<a href="/">

<span>-</span>

</a>
</h3>


<!-- Footer -->
<div class="footer"><div class="section-inner">

<p>Footer text placed here.</p>

</div></div>

</body>


</html>




Answer

You can just add a bit of CSS:

#modal01 {
    position: absolute;
    top: 0;
    width: 100%;
    z-index: 999;
}

See the example on codepen: http://codepen.io/anon/pen/XjJAdw

Comments