Popup boxes are the most useful way of showing a warning or any other important information to the website. In this article I’m going to walk you through the creation of a very simple popup box with shadow overlay and close button. We’re going to implement this using HTML, CSS and jQuery.
HTML Code:
add a link that triggers the box and a div that behaves like the box shadow. This wraps the actual box with the close button. The helper span is used to center the box vertically.
<h2>Animated Modal with Header and Footer</h2>
<button id="modelbtn">Click Here</button>
Popup or model code
<div id="myPopup" class="modalLayout">
<div class="modalLayout-content">
<div class="modalLayout-header">
<span class="close">×</span>
<h2>Modal Header</h2>
</div>
<div class="modalLayout-body">
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the</p>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the</p>
</div>
<div class="modalLayout-footer">
<h3>Modal Footer</h3>
</div>
</div>
</div>
CSS Code:
.modalLayout {
display: none;
position: fixed;
z-index: 1;
left: 0;
top: 0;
width: 100%;
background-color: rgb(0,0,0);
background-color: rgba(0,0,0,0.4);
padding-top: 100px;
height: 100%;
}
.modalLayout-content {
position: relative;
background-color: #fff;
margin: auto;
width: 50%;
border-radius: 12px;
-webkit-animation-name: modelAnimation;
-webkit-animation-duration: 0.5s;
animation-name: modelAnimation;
animation-duration: 0.5s
}
@-webkit-keyframes modelAnimation {
from {top:-300px; opacity:0}
to {top:0; opacity:1}
}
@keyframes modelAnimation {
from {top:-300px; opacity:0}
to {top:0; opacity:1}
}
.close {
color: #111;
float: right;
font-size: 32px;
font-weight: bold;
cursor: pointer;
}
.close:focus {
color: #111;
outline: none;
cursor: pointer;
}
.modalLayout-header {
padding: 2px 16px;
color: #111;
border-bottom: 1px solid silver;
}
.modalLayout-body {padding: 2px 16px;}
.modalLayout-footer {
padding: 2px 16px;
color: #111;
border-top: 1px solid silver;
}
JS Code:
var myPopup = document.getElementById('myPopup');
var modelbtn = document.getElementById("modelbtn");
var span = document.getElementsByClassName("close")[0];
modelbtn.onclick = function(){
myPopup.style.display = "block";
}
span.onclick = function(){
myPopup.style.display = "none";
}
window.onclick = function(e) {
if (e.target == myPopup) {
myPopup.style.display = "none";
}
}