<h1>Css Modal</h1>
<a href="#popUp" id="openPopUp">Open it!</a>
<!-- POP UP -->
<aside id="popUp" class="popup">
<div class="popUpContainer">
<header>
<a href="#!" class="closePopUp">X</a>
<h2>Nicee!</h2>
</header>
<article>
</article>
</div>
<a href="#!" class="closePopUpOutSide"></a>
</aside>
body{
background-color: #2c3e50;
font-family: 'Helvetica';
width:100%;
height:100%;
margin:0;
padding: 0;
padding-top: 10em;
position: relative;
text-align:center;
}
h1{
color: #ffffff;
padding: 1em;
}
#openPopUp{
text-align:center;
background-color: #1abc9c;
padding: 15px 15px;
color: #ffffff;
font-weight: 500;
font-size: 1.5em;
border-radius: 3.5px;
text-decoration: none;
font-weight: 100;
transition:background-color 0.15s linear;
transition:background-color 0.15s linear;
transition:background-color 0.25s linear;
transition:background-color 0.25s linear;
}
a#openPopUp:hover{
cursor: pointer;
background-color: #1abc9e;
}
.popup{
position: fixed;
top: -100vh;
left: 0;
z-index: 9999999;
background: rgba(0,0,0, 0.75);
width: 100vw;
height: 100vh;
opacity: 0;
transition: opacity 0.35s ease;
transition: opacity 0.35s ease;
transition: opacity 0.35s ease;
transition: opacity 0.35s ease;
}
.popup .popUpContainer{
width: 100%;
max-width: 500px;
position: fixed; /* To avoid scroll to target */
left: 50%;
top: -100vh;
transition: top 0.35s ease;
transition: top 0.35s ease;
transition: top 0.35s ease;
transition: top 0.35s ease;
/* Trick to properly center the element by using negative
1/2 length of element as margin left and top */
margin-left: -250px;
background-color: #ffffff;
box-shadow: 0 1px 2px rgba(0,0,0,0.1);
box-shadow: 0 1px 2px rgba(0,0,0,0.1);
box-shadow: 0 1px 2px rgba(0,0,0,0.1);
border-radius: 2px;
z-index: 9999999;
}
.popup h2{
padding: 0.5em;
text-align: center;
color: #444444;
margin: 0;
}
.popup img{
width: 100%;
display: block;
}
.popup article{
height: 300px;
background-color: #e67e22;
}
/* The cancel button on popup dialog */
.popup a.closePopUp{
font-family: verdana;
color: #e74c3c;
position: absolute;
top: 0.2em;
right: 0.375em;
margin: 0;
padding: 5px;
font-weight: bold;
font-size: 1.5em;
text-decoration: none;
}
/* The cancel button on popup dialog */
.popup a:hover{
color: #c0392b;
}
/* When popup is targeted, by clicking on link with #popup in HTML */
.popup:target{
opacity: 1;
top: 0;
}
.popup .closePopUpOutSide{
position: absolute;
left:0;
width: 100%;
height: 100%;
z-index: 9999991;
}
.popup:target .popUpContainer{
top: 50px;
transition: top 0.35s ease;
transition: top 0.35s ease;
transition: top 0.35s ease;
transition: top 0.35s ease;
}
@media (max-width: 796px) {
.popup .popUpContainer{
width: 90%;
max-width: none;
left: 5%;
margin-left: 0;
}
.popup ul{
padding: 0 1em 0 1em;
}
.popup:target .popUpContainer{
top: 25px;
transition: top 0.35s ease;
transition: top 0.35s ease;
transition: top 0.35s ease;
transition: top 0.35s ease;
}
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.