X

Simple Popup Div Using jQuery


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.

simple-popup-div-using-jquery

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.

Demo

commenter

About Varadharaj V

The founder of Kvcodes, Varadharaj V is an ERP Analyst and a Web developer specializing in WordPress(WP), WP Theme development, WP Plugin development, Frontaccounting(FA), Sales, Purchases, Inventory, Ledgers, Payroll & HRM, CRM, FA Core Customization, OpenCart Theme Development, PHP, HTML, CSS, jQuery, Bootstrap development and content SEO.

Comment Below

Your email address will not be published. Required fields are marked *

*

Current ye@r *

Menu

Sidebar

Subscribe E-mail Updates

Subscribe to our email newsletter.

 

Advertisement

Category Posts