Simple Popup Div Using jQuery
- Article
- Comment
Simple jQuery Popup Div, which is very easy to create and show it. Let me say few things about the popup,
- It can be viewed in IE8 As well
- Also Mobile Responsive
- Lite Weight
- Easy to Integrate in any Website
- Simple Code and Easy Steps
- Download Available
Let’s move to the implementation area.
After Closing html tag, you will open <body> tag, Just after that body tag, you need to use the below code.
<div id="subscriber_form" > <div id="sub_div_form"> <span id="kv_form_close"> X </span> <!-- You HTML Content which will Appear on the popup --> </div> </div>
Before Placing this code, you need to style it to show it center of the page, when you view it on browser. So here is your CSS to make it look nice.
#subscriber_form{ display:none; }
#subscriber_form {
margin: 0;
width: 100%;
z-index: 2;
height: 100%;
max-height: 1080px;
position: fixed;
background: rgba(70, 71, 72, 0.69);
}
#sub_div_form {
width: 240px;
height: 210px;
margin: 0 auto;
background: white;
margin-top: 15%;
padding: 45px;
border: 1px solid #9E9E9E;
border-radius: .25em .25em .4em .4em;
text-align: center;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
}
#sub_div_form span {
position: relative;
float: right;
font-weight: 700;
margin-top: -40px;
height: 15px;
font-size: 18px;
width: 15px;
line-height: 15px;
margin-right: -40px;
border: 2px solid;
border-radius: 90px;
padding: 7px;
}
span#kv_form_close:hover {
color: #e0190b;
}
@media screen and (max-width: 440px) {
#sub_div_form {
width: 290px;
padding: 35px;
}
}
Now, Let’s see it on browser, you can see the div is invisible now. Because, we styled it display: none. Just Remove and check it. After that, we need to add jQuery functionality of show and hide based on your needs. Here I am writing it
$(document).ready(function(){
$('#subscriber_form').delay(1000).fadeIn('slow'); //default Auto after 1 Sec
$("#subscriber_form").on('click', function(e){ // Close, when click outside of the box
if (e.target !== this)
return;
else{
$(this).hide();
}
});
$("#show_popup").on("click", function() { // Custom Show button code.
$("#subscriber_form").show();
});
$("#kv_form_close").on('click', function(e){ // close button code.
$('#subscriber_form').fadeOut('slow');
});
});
Now, Its time for result check. you can check it here as demo and also you can able to download the code as well.
