All the UI developers are familiar with popup windows. Most of the web applications will have atleast one popup used in it. May be for showing some custom messages, some additional information, data select options etc… So, we can say popup is commonly used by all UI developers. There are many jQuery plugins available for creating fancy box or fancy popups. When we use those popup plugins, we are adding an additional jquery file in our HTML page. Let us consider creating a simple fancy popup without using any additional jQuery plugins for popups.
Have you ever thought of creating a fancy popup only with css and a bit of jQuery? Or is it possible to make a popup without any jQuery plugins for popup? So, we will try to create a Fancy popup easily with css and few lines of jquery? This post is for showing a simple fancy popup with just css and few lines of jquery.
How to create a Simple Fancy Popup?
Here, I am going to show how to create a simple fancy popup, only with css and few lines of jquery. Without using any popup plugins for opening fancy pop up and closing it, just adding ‘fadeIn’ and ‘fadeOut’ method.
HTML for Simple Fancy Popup
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Simple Fancy Popup</title>
</head>
<body>
<div class="pop-up-button">
<button id="open-popup">Open Pop Up</button>
</div>
<div class="pop-up-screen">
<a href="#" class="close" title="close">Close</a>
<div class="pop-up-content">
Pop up Content Goes here...
</div>
</div>
<div class="overlay"></div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
</body>
</html>
Add Jquery plugin at the bottom of the page, just before the closing of body tag.
CSS required for Simple Fancy Popup
.pop-up-button { position: relative;}
.pop-up-screen {
display: none;
position: absolute;
z-index: 2;
width: 60%;
height: 500px;
margin-left: 50%;
left: -30%;
background: #fff;
box-shadow: 0 3px 5px #000;
-moz-border-radius: 8px;
-webkit-border-radius: 8px;
border-radius: 8px;
}
.overlay {
display: none;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: #000;
opacity: 0.5;
}
.close {
background: url(close.png) no-repeat 0 0;
display: block;
width: 32px;
height: 32px;
text-indent: -9999px;
position: absolute;
right: -10px;
top: -15px;
}
.pop-up-content {
padding: 15px;
}
Initially make the overlay and pop up screen to display: none. And with the jquery we will make the fancy popup visible when the button is clicked.
jQuery required for Simple Fancy Pop Up
$(document).ready(function(){
$('#open-popup').on('click', function(){
$('.pop-up-screen, .overlay').fadeIn();
});
$('.close, .overlay').on('click', function(){
$('.pop-up-screen, .overlay').fadeOut();
});
});
Here, when we click on the button, we are adding the fadeIn effect to the pop up and the overlay. The same way, fadeOut effect is given on click of the overlay or the close button to close or hide the pop up.
Demo for Simple Fancy Popup
Find the working example of Simple Fancy popup here.
Try creating a simple popup with the code.
