Model Popup

Hello Guys !!

This tutorial will help ypu to create Model Pop Up Box. You can follow this tutorial and in very steps you will be able create your own pop up every time. You don’t need any Model Popup plugin to download.

Step 1.

In index.html file At header section link the style.css

<link href=”style.css” rel=”stylesheet” type=”text/css” />

Link Jquery libraries in header section after the CSS file linked

<script charset=”utf-8″ type=”text/javascript” src=”js/jquery-migrate-1.2.1.min.js”></script>
<script charset=”utf-8″ type=”text/javascript” src=”js/jquery-2.0.3.min.js”></script>
<script charset=”utf-8″ type=”text/javascript” src=”js/custom.js”></script>

Note:- 1.I have used Jquery 2.0.3 version file. You can use any Jquery Liberary
2. custom.js you need to create and In this file contains custom jquery code to show model popup.

Step 2.

Inside your body tag of index.html
Add following html code

 

<button id=”btnshow”> Show Model Pop up</button>
<div id=”mymodel”>
<h3>Your Heading Goes Here</h3>
Your model body content goes here.

<span>x</span>

</div>
<div></div>

This is Simple Html You need to write for you pop. You can modify html inside

<div id=”mymodel”></div>

according to your theme requirment.

Step 3.

Inside style.css file add follwoing css code

.model{width:600px;height:400px;background:#FFF;position:absolute;top:75px;left:28%;z-index:9999;
transform:rotate(0deg) scale(0);transition:all 1s ease 0s;
}
.model h3{padding:10px;color:#FFF;margin:0px;background:#A0106D;}
.model p{padding:10px;}
.model .close {color: #FFFFFF;cursor: pointer;position: absolute;right: 10px;top: 10px;}
.overlay{position:fixed;width:100%;height:100%;left:0;top:0;z-index:9998;background:rgba(0,0,0,.7);display:none;}</code>

.model.open{transform:rotate(360deg) scale(1);}

You can modify this css to match popup style with your theme.

Step 4:

Inside custom.js file add following Jquery code

// JavaScript Document

$(document).ready(function(){

$(‘#btnshow’).click(function(){

$(‘#mymodel’).addClass(‘open’);
$(‘.overlay’).fadeIn(‘slow’);

});
$(‘.close’).click(function(){

$(‘#mymodel’).removeClass(‘open’);
$(‘.overlay’).fadeOut(‘slow’);

});

});

Step 5: Save all files and Open index.html file.