Last updated on January 8th, 2020 at 10:28 pm
Today i am going to explain you how we can create a simple popup using jquery, html and css. JQuery is very powerful tool for web designer we can do magic with jquery and css today on web. This post explain you how to create a popup which support draggable and easy to create.
Code:
First we need to add some jQuery library which we use to create popup.
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script src="//code.jquery.com/ui/1.11.0/jquery-ui.js"></script>
I am using jQuery default library from Google CDN and use jQuery UI library from jQuery CDN to enable drag support in my popup. Now after adding these jQuery in my project i design my popup.
HTML Code
<button id="showpopup">Click to pop it up!</button> <!-- POP up background--> <div id="pop-bg" class="popbg"> <div id="popWindow" class="popup pop-shadow"> <div class="pop-wrapper"> <header> <div class="pop-header" id="pop-drag"> <div class="left pop-title"> Title </div> <div class="right pop-control"> <span class="pop-close" id="close-pop">X</span> </div> </div> </header> <div class="main-content"> <h1>Popup sample</h1> <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 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. </p> </div> </div> </div> </div>
This is a simple html popup i make in this we have a light background and design a simple popup with header contain title bar and cancel button and in popup body i add simple paragraph, you can add your form for user input or for file uploading etc.
CSS for POPUP
<style type="text/css">
.popbg{
display: block;
position: absolute;
background: rgba(255, 255, 255, 0.9);
top: 0;
bottom: 0;
right: 0;
left: 0;
overflow: auto;
display: none;
}
.popup{
display: block;
position: absolute;
width: 500px;
left: 30%;
top: 35%;
background: #fff;
display: none;
}
.pop-shadow{
-webkit-box-shadow: 0 0 40px rgba(0,0,0,.4);
box-shadow: 0 0 40px rgba(0,0,0,.4);
background: #fff;
background-clip: padding-box;
border: 1px solid #e5e5e5;
border: rgba(0,0,0,0);
outline: 0;
}
.pop-header{
background: #efefef;
border: #ddd solid 1px;
position: relative;
display: block;
}
.pop-header:after{
clear:both;
height: 0px;
display:block;
content: "";
}
.left{
float: left;
}
.right{
float: right;
}
.pop-title{
display: block;
padding: 10px;
font-weight: bold;
font-family: 'Roboto', sans-serif;
}
.pop-control{
display: block;
padding: 10px;
}
.pop-close{
display: block;
font-weight: bold;
font-family: arial;
cursor: pointer;
display: inline-block;
color: #999;
font-size: 14px;
}
.pop-close:hover{
color: #444;
}
.main-content{
display: block;
font-family: 'Roboto', sans-serif;
padding: 5px 10px;
}
.main-content h1{
font-size: 28px;
}
.main-content p{
font-size: 16px;
}
</style>
I make a simple design for my popup i use simple css property which is easy to understand and call these class in html code to make my popup look nice.
jQuery
Now its time for real work i create id in my html tags. Start from Button when ever user click on button click event is occur and using jQuery we handle that event and display popup background and popup .
<script type="text/javascript">
$('document').ready(function(){
// Show popup
$('#showpopup').click(function(){
$('#pop-bg').show();
$('#popWindow').show();
// Enable draggable and align popup to center
$('#popWindow').draggable({cursor: "move", handle: '#pop-drag'});
popalign();
});
// Close Popup
$('#close-pop').click(function(){
$('#pop-bg').hide();
$('#popWindow').hide();
});
});
$(window).resize(function(){
popalign();
});
function popalign(){
var winH = $(window).height();
var winW = $(window).width();
//Set the popup window to center
$("#popWindow").css('top', winH/2-$("#popWindow").height()/2);
$("#popWindow").css('left', winW/2-$("#popWindow").width()/2);
}
</script>
When document is loaded completely after that we can handle any event.
$('document').ready(function(){});
Now when user click on popup button we can show our popup. I also create a function to adjust my popup in center of screen.
function popalign(){
var winH = $(window).height();
var winW = $(window).width();
//Set the popup window to center
$("#popWindow").css('top', winH/2-$("#popWindow").height()/2);
$("#popWindow").css('left', winW/2-$("#popWindow").width()/2);
}
To enable brag support i call this default jQuery function.
$('#popWindow').draggable({cursor: "move", handle: '#pop-drag'});
When ever user click on title bar of popup and try to move it and it will move.
Complete Code:
<!DOCTYPE html>
<html>
<head>
<title>jQuery html and css popup</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="//code.jquery.com/ui/1.11.0/jquery-ui.js"></script>
<link href='http://fonts.googleapis.com/css?family=Roboto' rel='stylesheet' type='text/css'>
<style type="text/css">
.popbg{
display: block;
position: absolute;
background: rgba(255, 255, 255, 0.9);
top: 0;
bottom: 0;
right: 0;
left: 0;
overflow: auto;
display: none;
}
.popup{
display: block;
position: absolute;
width: 500px;
left: 30%;
top: 35%;
background: #fff;
display: none;
}
.pop-shadow{
-webkit-box-shadow: 0 0 40px rgba(0,0,0,.4);
box-shadow: 0 0 40px rgba(0,0,0,.4);
background: #fff;
background-clip: padding-box;
border: 1px solid #e5e5e5;
border: rgba(0,0,0,0);
outline: 0;
}
.pop-header{
background: #efefef;
border: #ddd solid 1px;
position: relative;
display: block;
}
.pop-header:after{
clear:both;
height: 0px;
display:block;
content: "";
}
.left{
float: left;
}
.right{
float: right;
}
.pop-title{
display: block;
padding: 10px;
font-weight: bold;
font-family: 'Roboto', sans-serif;
}
.pop-control{
display: block;
padding: 10px;
}
.pop-close{
display: block;
font-weight: bold;
font-family: arial;
cursor: pointer;
display: inline-block;
color: #999;
font-size: 14px;
}
.pop-close:hover{
color: #444;
}
.main-content{
display: block;
font-family: 'Roboto', sans-serif;
padding: 5px 10px;
}
.main-content h1{
font-size: 28px;
}
.main-content p{
font-size: 16px;
}
</style>
<script type="text/javascript">
$('document').ready(function(){
// Show popup
$('#showpopup').click(function(){
$('#pop-bg').show();
$('#popWindow').show();
// Enable draggable and align popup to center
$('#popWindow').draggable({cursor: "move", handle: '#pop-drag'});
popalign();
});
// Close Popup
$('#close-pop').click(function(){
$('#pop-bg').hide();
$('#popWindow').hide();
});
});
$(window).resize(function(){
popalign();
});
function popalign(){
var winH = $(window).height();
var winW = $(window).width();
//Set the popup window to center
$("#popWindow").css('top', winH/2-$("#popWindow").height()/2);
$("#popWindow").css('left', winW/2-$("#popWindow").width()/2);
}
</script>
</head>
<body>
<div class="container">
<h2>Popup with drag support using jQuery, HTML and CSS.</h2>
<button id="showpopup" class="btn btn-info">Click to pop it up!</button>
</div>
<!-- POP up background-->
<div id="pop-bg" class="popbg">
<div id="popWindow" class="popup pop-shadow">
<div class="pop-wrapper">
<header>
<div class="pop-header" id="pop-drag">
<div class="left pop-title">
Title
</div>
<div class="right pop-control">
<span class="pop-close" id="close-pop">X</span>
</div>
</div>
</header>
<div class="main-content">
<h1>Popup sample</h1>
<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 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</p>
</div>
</div>
</div>
</div>
</body>
</html>