There are many ways and reasons to add Jquery Popup Window. I will show you a way from many, but I think you know the reasons, like you want to display contact us form, facebook like or subscription box in popup window, also it can be used to display error or some kind of ads.
Whatever your requirement, it gives you a comfort to add anything in the box. Many times you would have seen that when you visit on some websites a box open and it cover the whole page with its background. I will explain you that how can you put this Jquery Popup Window in WordPress theme?
It will be easy for you if you have some basic knowledge of HTML, CSS and Jquery.
For your convenience, I have divided it into parts, So I am writing them one by one.
1. As you all know it is needful to insert Jquery file if we work with Jquery.
Open header.php file from wp-content/themes folder and insert the following line between the <head></head> tag.
2. Then create HTML structure.
First div is for overlay background and second one is for the content. Insert this HTML code in any template file after <body> tag.
3. Now add small Jquery code to initialize the popup. This code will goes inside the <script> tag in header.php or create a separate js file for the below code.
And the last part is CSS. You can modify the styling as per your need. Below is a basic css required for popup. As we have done for js insert it inside head tag or put it in another file.
It is good if you will create separate files for each code and add theme between <head></head> tag after jquery file as given below.
One more thing, you can make it compatible for portable device, for that you need to add conditional media query in css file.
That's it. We have completed a simple Jquery popup window for WordPress. I have given you a basic structure, you may change it according to your website need.
Whatever your requirement, it gives you a comfort to add anything in the box. Many times you would have seen that when you visit on some websites a box open and it cover the whole page with its background. I will explain you that how can you put this Jquery Popup Window in WordPress theme?
It will be easy for you if you have some basic knowledge of HTML, CSS and Jquery.
For your convenience, I have divided it into parts, So I am writing them one by one.
1. As you all know it is needful to insert Jquery file if we work with Jquery.
Open header.php file from wp-content/themes folder and insert the following line between the <head></head> tag.
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
2. Then create HTML structure.
<div class="bg">
<div class="boxcontent">
<button class="close-btn">Close</button><br/>
<p>put your content here</p>
</div>
</div>
<div class="boxcontent">
<button class="close-btn">Close</button><br/>
<p>put your content here</p>
</div>
</div>
First div is for overlay background and second one is for the content. Insert this HTML code in any template file after <body> tag.
3. Now add small Jquery code to initialize the popup. This code will goes inside the <script> tag in header.php or create a separate js file for the below code.
$(document).ready(function(){
var docHeight = $(document).height(); //page height
var scrollTop = $(window).scrollTop(); // px value from the to
$('.bg').show().css({'height' : docHeight}); //display popup and set height
$('.boxcontent').show(); // show the popup
$('.boxcontent').css({'top': scrollTop+100+'px'});
//Close button
$('.close-btn').click(function(){
$('.bg, .boxcontent').hide(); });
$('.boxcontent').click(function(){
return false;
});
});
var docHeight = $(document).height(); //page height
var scrollTop = $(window).scrollTop(); // px value from the to
$('.bg').show().css({'height' : docHeight}); //display popup and set height
$('.boxcontent').show(); // show the popup
$('.boxcontent').css({'top': scrollTop+100+'px'});
//Close button
$('.close-btn').click(function(){
$('.bg, .boxcontent').hide(); });
$('.boxcontent').click(function(){
return false;
});
});
And the last part is CSS. You can modify the styling as per your need. Below is a basic css required for popup. As we have done for js insert it inside head tag or put it in another file.
.bg {
display: none;
position: absolute;
top: 0;
left: 0;
height:100%;
width: 100%;
cursor: pointer;
z-index: 1000; /* high z-index */
background: #000; /* fallback */
background: rgba(0,0,0,0.75);
}
.boxcontent{
display: none;
background: #fff;
padding: 1%;
width: 40%;
position: relative;
top: 15%;
left: 50%;
margin: 0 0 0 -20%;
}
.close-btn {
float:right;
padding:0;
}
display: none;
position: absolute;
top: 0;
left: 0;
height:100%;
width: 100%;
cursor: pointer;
z-index: 1000; /* high z-index */
background: #000; /* fallback */
background: rgba(0,0,0,0.75);
}
.boxcontent{
display: none;
background: #fff;
padding: 1%;
width: 40%;
position: relative;
top: 15%;
left: 50%;
margin: 0 0 0 -20%;
}
.close-btn {
float:right;
padding:0;
}
It is good if you will create separate files for each code and add theme between <head></head> tag after jquery file as given below.
<script type="text/javascript" src="/jspath/jsname"></script>
<link rel="stylesheet" type="text/css" href="/csspath/cssname" />
<link rel="stylesheet" type="text/css" href="/csspath/cssname" />
One more thing, you can make it compatible for portable device, for that you need to add conditional media query in css file.
@media only screen and (min-width: 0px) and (max-width: 720px){
//put css code here.
}
//put css code here.
}
That's it. We have completed a simple Jquery popup window for WordPress. I have given you a basic structure, you may change it according to your website need.
0 Comment