There are many needs for a popup box to your blog. Many purposes such as show floating ads, convince visitor to subscribe or get shares and like to your site, show survey forms to get facts and comments from user, show your certain product to sell. You may need to show them while site loading or in a click and hide with another button click.'
I explain about editing a sample code to build up all types of popup boxes. It is able you to customize all the things in the popup box after you read this. Let begins to topic,
First know about the CSS style code Which is used to shine up your popup box. Style sheets are used to change your plain HTML into a shiny site.
Every tag after # carries style for its own objects defined in HTML. Period or full stop “.” also can be used instead of the hash #.
#Object1_Name{ Here the styles are defined for object1. You could modify everything here to change style for the certain object1 }
#backgroundPopup
{Popup will be shown in fixed position and visitor cannot access content in your blog which will be shaded, for the code given here by default. If you want a popup code which move along the site while all the content are active, Modify code in this tag by removing “display:none;” and changing “position” to static. }
#popupContact{ You can adjust font size, border, background color etc here. You can also change the width and height. But You must set a certain value other than percentages for those.}
#popupContactClose{ You can change properties and position of its close button here.}
#Content{ it’s able to customize characteristic of text entered in the div Content tag here.}
You can also able to add more styles and divisions for the styles with same tag id. This style code strip should be added into your blog HTML just before the popup code in order to get good impression of the blog. It is also eligible to add this code combine with the popup code. However, I have given those codes separately to teach you full customization of popup box HTML. Some sample and edited ready made popup codes suit for some popular needs also been attached at last here. First you copy and edit the style code given below.
Style Section Code
<style>
#backgroundPopup{ display:none; position:fixed; _position:absolute; height:100%; width:100%; top:0; left:0; background-color: transparent; background:rgba(0, 0, 0, 0.5); z-index:999; }
#popupContact{ display:none; position:fixed; _position:absolute; height:500px; width:500px; background:#FFFFFF; border:4px solid #ddd; z-index:999; padding:8px; font-size:13px;}
#popupContactClose{ background:url
(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEih9qMMLSQAWLFQF8L6oDqVM4l7kqZnXu6Ukxfbt_LIDQlQPLsSTHyc9_7dXQrLoeDkh2sOfGjGTqi-SvNTVhsgUVKRken2TWEIMZSyZTFUnnmec3tXWd2ubGw-651GX96P7lzUAVc0HuU/s38-p/x-mark-button-md.png) no-repeat; width:37px; height:37px; display:inline; z-index:3200; position:absolute; top:-15px; right:-16px; cursor:pointer; text-indent: -99999px;}
#Content{ color: #AAAAAA; font-family: times New Roman; font-size: 25px; font-style: italic; line-height:30px; }
</style>
|
Let get into the HTML Section guys. It is the portion deciding how the objects in the popup should be arranged.
<div id="*****"> the stars (*****) in the id are the tags set in the CSS style code. Style of every division is decided by its corresponding tag in the style sheet.
HTML Section Code
<div id="backgroundPopup">
<div id="popupContact">
<a id="popupContactClose">x</a>
<div id="Content"> Your Content Here </div>
</div>
</div> |
You should include all of your things’ code need to be show in popup just after <div id="Content"> tag.
<div id="Content"> Your Content here </div>
It is able to add any HTML, Script, iframes, ads etc in the “your content here” area. You have to be care about that every HTML tags are closed and enclosed properly inside of it. You should consider its view size if you set height and width for #popupContact and #backgroundpopup tags in CSS style code above to avoid content overlapping popup. That is all to say about HTML section. Let we move to the Script section.
You can also open up another web URL when viewer close popup. Find <a id="popupContactClose">x</a> add this following code between a and id in it.
href="Your WEB URL Here"
In Script section, there are not much things to learn. First you know how the popup showing system works. Popup will be shown only once and never again for few days after closed by a user. You could modify this code to show popup all the time when page reloaded by the user. It uses cookies to avoid show again after you close it. You can customize that how many days should be taken to show it again to the user for subscription requests. Find { expires: 7 } in script and change the days 7 into anything you want. It is twice in it code, the second used to close popup with escape key on keyboard. Change in both places. If you want to show popup for every page reloading, find this code popupStatus = 0; and change the 0 into 1.
Script Section Code
<script src="http://yourjavascript.com/24315621361/jquery.cookie.js" type="text/javascript">
</script>
<script type="text/javascript">
var popupStatus = 0;
//this code will load popup with jQuery magic!
function loadPopup(){
//loads popup only if it is disabled
if(popupStatus==0){
$("#backgroundPopup").fadeIn("slow");
$("#popupContact").fadeIn("slow");
popupStatus = 1;
}
}
//This code will disable popup when click on x!
function disablePopup(){
//disables popup only if it is enabled
if(popupStatus==1){
$("#backgroundPopup").fadeOut("slow");
$("#popupContact").fadeOut("slow");
popupStatus = 0;
}
}
//this code will center popup
function centerPopup(){
//request data for centering
var windowWidth = document.documentElement.clientWidth;
var windowHeight = document.documentElement.clientHeight;
var popupHeight = $("#popupContact").height();
var popupWidth = $("#popupContact").width();
//centering
$("#popupContact").css({
"position": "absolute",
"top": windowHeight/2-popupHeight/2,
"left": windowWidth/2-popupWidth/2
});
//only need force for IE6
$("#backgroundPopup").css({
"height": windowHeight
});
}
//CONTROLLING EVENTS IN jQuery
$(document).ready(function(){
if ($.cookie("anewsletter") != 1) {
//centering with css
centerPopup();
//load popup
loadPopup();
}
//CLOSING POPUP
//Click the x event!
$("#popupContactClose").click(function(){
disablePopup();
$.cookie("anewsletter", "1", { expires: 7 });
});
//Press Escape event!
$(document).keypress(function(e){
if(e.keyCode==27 && popupStatus==1){
disablePopup();
$.cookie("anewsletter", "1", { expires: 7 });
}
});
});
</script>
You can also set to show it once for every sub URLs or pages in your site. Find tag <script type="text/javascript"> and add var url1=window.location.href; just after that. Find all the three “anewsletter” and replace it with url1 without any quotes. You have done. It can be used for to show share or like popups in every pages in your blog.
Positioning your popup
The code given below will center your popup. If you want to show it in your favor position, remove code between //request data for centering and //centering. Then give your top and left coordinates in pixels(px) in //centering section.
//this code will center popup
function centerPopup(){
//request data for centering
var windowWidth = document.documentElement.clientWidth;
var windowHeight = document.documentElement.clientHeight;
var popupHeight = $("#popupContact").height();
var popupWidth = $("#popupContact").width();
//centering
$("#popupContact").css({
"position": "absolute",
"top": windowHeight/2-popupHeight/2,
"left": windowWidth/2-popupWidth/2
});
//only need force for IE6
$("#backgroundPopup").css({
"height": windowHeight
});
}
#Content{ color: #AAAAAA; font-family: times New Roman; font-size: 25px; font-style: italic; line-height:30px; }
</style>
|
Some Sample Popup HTML Scripts Codes
1.Feedback Subscription Popup Box HTML Script code:
<style>
#backgroundPopup
{ display:none; position:fixed; _position:absolute;
/* hack for internet explorer 6*/
height:100%; width:100%; top:0;
left:0; background-color: transparent;
background:rgba(0, 0, 0, 0.5);z-index:999; }
#popupContact{ display:none;
position:fixed; _position:absolute;
/* hack for internet explorer 6*/ height:500px; width:500px; background:#FFFFFF;
border:4px solid #ddd; z-index:999;
padding:8px; font-size:13px; }
#popupContactClose{ background:url
(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEih9qMMLSQAWLFQF8L6oDqVM4l7kqZnXu6Ukxfbt_LIDQlQPLsSTHyc9_7dXQrLoeDkh2sOfGjGTqi-SvNTVhsgUVKRken2TWEIMZSyZTFUnnmec3tXWd2ubGw-651GX96P7lzUAVc0HuU/s38-p/x-mark-button-md.png)
no-repeat; width:37px; height:37px; display:inline; z-index:3200; position:absolute; top:-15px; right:-16px; cursor:pointer; text-indent: -99999px;}
#Content { color: #AAAAAA; font-family: times New Roman; font-size: 25px; font-style: italic; line-height:30px; }
#insideimg { float: left; height: 80px; padding: 0 25px 0 10px; width: 80px; }
#btntfollowForm { padding: 15px; }
#btntfollowForm img { border:none; }
#btntfollowForm p { margin: 0 0 10px;}
#btntfollowForm input:not([type="checkbox"]){ width: 93%; margin-top: 10px; margin-bottom: 20px; padding: 10px 5px 10px 25px; border: 1px solid rgb(178, 178, 178); -webkit-appearance: textfield; -webkit-box-sizing: content-box; -moz-box-sizing : content-box; box-sizing : content-box; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; -webkit-box-shadow: 0px 1px 4px 0px rgba(168, 168, 168, 0.6) inset; -moz-box-shadow: 0px 1px 4px 0px rgba(168, 168, 168, 0.6) inset; box-shadow: 0px 1px 4px 0px rgba(168, 168, 168, 0.6) inset; -webkit-transition: all 0.2s linear; -moz-transition: all 0.2s linear; -o-transition: all 0.2s linear; transition: all 0.2s linear; }
#btntfollowForm input:not([type="checkbox"]):active,
#btntfollowForm input:not([type="checkbox"]):focus{ border: 1px solid rgba(91, 90, 90, 0.7); background: rgba(238, 236, 240, 0.2); -webkit-box-shadow: 0px 1px 4px 0px rgba(168, 168, 168, 0.9) inset; -moz-box-shadow: 0px 1px 4px 0px rgba(168, 168, 168, 0.9) inset; box-shadow: 0px 1px 4px 0px rgba(168, 168, 168, 0.9) inset;}
#btntfollowForm .button input{ background: none repeat scroll 0 0 #3D9DB3; border: 1px solid #1C6C7A; border-radius: 3px 3px 3px 3px; box-shadow: 0 1px 6px 4px rgba(0, 0, 0, 0.07) inset, 0 0 0 3px #FEFEFE, 0 5px 3px 3px #D2D2D2; color: #FFFFFF; cursor: pointer; font-family: 'Arial Narrow',Arial,sans-serif; font-size: 24px; margin-bottom: 10px; padding: 8px 5px; text-shadow: 0 1px 1px rgba(0, 0, 0, 0.5); width: 30%; float: right; }
#btntfollowForm .button input:hover{ background: #4ab3c6; text-decoration: none; }
#btntfollowForm .button input:active,
#btntfollowForm .button input:focus{ background: rgb(40, 137, 154); position: relative; top: 1px; border: 1px solid rgb(12, 76, 87); -webkit-box-shadow: 0px 1px 6px 4px rgba(0, 0, 0, 0.2) inset; -moz-box-shadow: 0px 1px 6px 4px rgba(0, 0, 0, 0.2) inset; box-shadow: 0px 1px 6px 4px rgba(0, 0, 0, 0.2) inset; }
#btntFollowFooter { color:#222; text-align: center; font: 10px Tahoma, Helvetica, Arial, Sans-Serif; padding: 7px 0; margin-top: 80px; text-shadow: 0px 2px 3px #555; position: absolute; width: 500px; }
#btntFollowFooter a { color: #222; text-decoration: none; }
#btntFollowFooter a:hover { color: #fff; }
<!--[if lt IE 7]>
#btnt-container a.btntCloseImg { background:none; right:-14px; width:22px; height:26px; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEih9qMMLSQAWLFQF8L6oDqVM4l7kqZnXu6Ukxfbt_LIDQlQPLsSTHyc9_7dXQrLoeDkh2sOfGjGTqi-SvNTVhsgUVKRken2TWEIMZSyZTFUnnmec3tXWd2ubGw-651GX96P7lzUAVc0HuU/s38-p/x-mark-button-md.png',sizingMethod='scale'); }
#btntfollowForm input{ padding: 10px 5px 10px 32px; width: 93%; }
#btntfollowForm input[type=checkbox]{ width: 10px; padding: 0;}
<![endif]-->
</style>
<div id="backgroundPopup">
<div id="popupContact">
<a id="popupContactClose">x</a><br />
<div id="btntfollowForm">
<center>
<img alt="email" border="0" src="https://lh3.googleusercontent.com/-
qaaiWPDGTtM/VAlBpbH0_5I/AAAAAAAAAfs/eSK0mQYj3YY/s200-no/feed.png" />
</center>
<div id="Content">
Subscribe to our mailing list to get the
updates to your email inbox...</div>
<form action="http://feedburner.google.com/fb/a/mailverify" method="post" onsubmit="window.open 'http://feedburner.google.com/fb/a/mailverify?uri='Your Feedburner Name here', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" target="popupwindow">
<input name="email" placeholder="Enter Your Email..." required="required" type="text" /><input name="uri"
type="hidden" value="Your Feedburner Name here" /><input name="loc" type="hidden" value="en_US" /><br /><div>
<input type="submit" value="Subscribe" /></div>
</form>
</div><div>
Delivered by <a href="http://feedburner.google.com/" target="_blank">FeedBurner</a></div>
</div>
</div>
<script src="http://yourjavascript.com/24315621361/jquery.cookie.js" type="text/javascript">
</script>
<script type="text/javascript">
var popupStatus = 0;
//this code will load popup with jQuery magic!
function loadPopup(){
//loads popup only if it is disabled
if(popupStatus==0){
$("#backgroundPopup").fadeIn("slow");
$("#popupContact").fadeIn("slow");
popupStatus = 1;}}
//This code will disable popup when click on x!
function disablePopup(){
//disables popup only if it is enabled
if(popupStatus==1){
$("#backgroundPopup").fadeOut("slow");
$("#popupContact").fadeOut("slow");
popupStatus = 0; }}
//this code will center popup
function centerPopup(){
//request data for centering
var windowWidth = document.documentElement.clientWidth;
var windowHeight = document.documentElement.clientHeight;
var popupHeight = $("#popupContact").height();
var popupWidth = $("#popupContact").width();
//centering
$("#popupContact").css({
"position": "absolute",
"top": windowHeight/2-popupHeight/2,
"left": windowWidth/2-popupWidth/2
});
//only need force for IE6
$("#backgroundPopup").css({
"height": windowHeight
});}
//CONTROLLING EVENTS IN jQuery
$(document).ready(function(){
if ($.cookie("anewsletter") != 1) {
//centering with css
centerPopup();
//load popup
loadPopup();
}
//CLOSING POPUP
//Click the x event!
$("#popupContactClose").click(function(){
disablePopup();
$.cookie("anewsletter", "1", { expires: 7 });
});
//Press Escape event!
$(document).keypress(function(e){
if(e.keyCode==27 && popupStatus==1){
disablePopup();
$.cookie("anewsletter", "1", { expires: 7 });
}
});
});
</script>
You Should add this code after <body> tag
to show G+ button
.
<script src="https://apis.google.com/js/platform.js" async defer></script>
<style>
#Popupcontact
{ height:274px; width:52px; margin:0auto; position:fixed; _position:absolute;
border:3px solid #ccc; top:230px; right:0.5px; padding:5px;}
#glike{position:relative; top:2px; }
#Gplus{ position:relative; top:0px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhT8o4yIwcDquLGDQdm4PCFrb6czrhK8uAS2HzijB_wZfK5jtQQfxhDFLqoVrUYtYWwMcUzDbA1e2DSu6cuReUD6hWgpJeEA61zQuWBO90EtFr5TO87cNbK3D4_rVFC1fIldBDw0SXBfI_x/s50-no/) no-repeat; width:50px; height:50px; display:inherit;}
#fbshare{ position:relative; top:-14px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhiezleUvWb7A_DjF0kOXD7Dwtq3OkGMPDDpa58hwoYxGeJhf1-28a8eqGHMXfsJJcm8ygUaI4VbChDalqSbTrbac5GQlJJFKL5AUh7IZZpwsJ6MWGK1TbNgqw4n86SE3A5OWIZiWTkj87A/s50-no/) no-repeat; width:50px; height:50px; display:inherit;}
#twit{position:relative; top:-34px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi1ASFKQy1TlvTMTwZQ1jueoXt0Nh4_H0SPgM59dj2XTm-XwSqKvnBv9xaEY9VBZjk_RJflG7woeXE9KTEu0_X6cE5juO7OyuWG3W_TE0IkDuMFG1A5xQiSvI0n5MsYpxT5-c-dntJhgq4h/s50-no/) no-repeat; width:50px; height:50px; display:inherit;}
#linkin{position:relative; top:-52px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjZcpbzFcpAB4O5zMCtEyToo9q6e29QtglpKshta8FvTiY3BHm6rPcrlVlDdGedXTT6XIs49Xx-Rbi2qsjm6aI6ynFLkCxKFKIkl8JQkbcqdEwfZ1MT164ZxAS1vlbTUdeH4SjHNom0PznV/s50-no/) no-repeat; width:50px; height:50px; display:inherit;}
</style>
<div id="Popupcontact">
<center>
<!-- Place this tag where you want the +1 button to render. -->
<div id="glike" class="g-plusone" data-size="tall"></div><br />
<a href="https://plus.google.com/share?url=" id="Gplus"></a><br/>
<a href="https://www.facebook.com/sharer/sharer.php?u=" target="_blank" id="fbshare"></a><br />
<a id="twit" href="https://twitter.com/share" class="twitter-share-button"></a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';</script>
<br>
<a href="https://www.linkedin.com/shareArticle?mini=true&url=" id="linkin" ></a>
</div></center>
<script>
var url1=window.location.href;
document.getElementById('fbshare').href += url1;
document.getElementById('Gplus').href += url1;
document.getElementById('linkin').href += (url1+"&title=&summary=&source=");
</script>
<style>
#Popupcontact
{ height:272px; width:52px; margin:0auto; position:fixed; _position:absolute;
border:3px solid #ccc; top:230px; right:0.5px; padding:5px;}
#glike{position:fixed; top:2px; }
#Gplus{ position:relative; top:-3px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhT8o4yIwcDquLGDQdm4PCFrb6czrhK8uAS2HzijB_wZfK5jtQQfxhDFLqoVrUYtYWwMcUzDbA1e2DSu6cuReUD6hWgpJeEA61zQuWBO90EtFr5TO87cNbK3D4_rVFC1fIldBDw0SXBfI_x/s50-no/) no-repeat; width:50px; height:50px; display:inherit;}
#fbshare{ position:relative; top:5; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhiezleUvWb7A_DjF0kOXD7Dwtq3OkGMPDDpa58hwoYxGeJhf1-28a8eqGHMXfsJJcm8ygUaI4VbChDalqSbTrbac5GQlJJFKL5AUh7IZZpwsJ6MWGK1TbNgqw4n86SE3A5OWIZiWTkj87A/s50-no/) no-repeat; width:50px; height:50px; display:inherit;}
#twit{position:relative; top:2px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi1ASFKQy1TlvTMTwZQ1jueoXt0Nh4_H0SPgM59dj2XTm-XwSqKvnBv9xaEY9VBZjk_RJflG7woeXE9KTEu0_X6cE5juO7OyuWG3W_TE0IkDuMFG1A5xQiSvI0n5MsYpxT5-c-dntJhgq4h/s50-no/) no-repeat; width:50px; height:50px; display:inherit;}
#linkin{position:relative; top:5px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjZcpbzFcpAB4O5zMCtEyToo9q6e29QtglpKshta8FvTiY3BHm6rPcrlVlDdGedXTT6XIs49Xx-Rbi2qsjm6aI6ynFLkCxKFKIkl8JQkbcqdEwfZ1MT164ZxAS1vlbTUdeH4SjHNom0PznV/s50-no/) no-repeat; width:50px; height:50px; display:inherit;}
</style>
<div id="Popupcontact">
<center>
<table>
<tr>
<div id="glike" class="g-plusone" data-size="tall"></div>
</tr>
<tr>
<a href="https://plus.google.com/share?url=" id="Gplus"></a>
</tr>
<tr>
<a href="https://www.facebook.com/sharer/sharer.php?u=" target="_blank" id="fbshare"></a>
</tr>
<tr>
<a id="twit" href="https://twitter.com/share" class="twitter-share-button"></a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';</script>
</tr>
<tr>
<a href="https://www.linkedin.com/shareArticle?mini=true&url=" id="linkin" ></a>
</tr>
</table>
</center></div>
<script>
var url1=window.location.href;
document.getElementById('fbshare').href += url1;
document.getElementById('Gplus').href += url1;
document.getElementById('linkin').href += (url1+"&title=&summary=&source=");
</script>
<style>
#backgroundPopup1{ display:none; position:fixed; _position:absolute; height:100%; width:100%; top:0; left:0; background-color: transparent; background:rgba(0, 0, 0, 0.5); z-index:999; }
#popupContact1{ display:none; position:fixed; _position:absolute;height:500px; width:500px; background:#FFFFFF; border:4px solid #ddd; z-index:999; padding:0px; font-size:13px; }
#popupContactClose1{ background:url(https://www.networkcapital.net/images/close_button.gif) no-repeat; width:37px; height:37px; display:inline; z-index:3200; position:absolute; top:-15px; right:-16px; cursor:pointer; text-indent: -99999px;}
#btntfollowForm1.button input{ background: none repeat scroll 0 0 #3D9DB3; border: 1px solid #1C6C7A; border-radius: 3px 3px 3px 3px; box-shadow: 0 1px 6px 4px rgba(0, 0, 0, 0.07) inset, 0 0 0 3px #FEFEFE, 0 5px 3px 3px #D2D2D2; color: #FFFFFF; cursor: pointer; font-family: 'Arial Narrow',Arial,sans-serif; font-size: 24px; margin-bottom: 10px; padding: 8px 5px; text-shadow: 0 1px 1px rgba(0, 0, 0, 0.5); width: 30%; float: right; }
#btntfollowForm1.button input:hover{ background: #4ab3c6; text-decoration: none; }
#myword1{color: #AAAAAA; font-family: times New Roman; font-size: 25px; font-style: italic; line-height:30px; }
#btntfollowForm1.button input:active,
#btntfollowForm1.button input:focus{ background: rgb(40, 137, 154); position: relative; top: 1px; border: 1px solid rgb(12, 76, 87); -webkit-box-shadow: 0px 1px 6px 4px rgba(0, 0, 0, 0.2) inset; -moz-box-shadow: 0px 1px 6px 4px rgba(0, 0, 0, 0.2) inset; box-shadow: 0px 1px 6px 4px rgba(0, 0, 0, 0.2) inset; }
.btntFollowFooter { color:#222; text-align: center; font: 10px Tahoma, Helvetica, Arial, Sans-Serif; padding: 7px 0; margin-top: 80px; text-shadow: 0px 2px 3px #555; position: absolute; width: 500px; }
.btntFollowFooter a { color: #222; text-decoration: none; }
.btntFollowFooter a:hover { color: #fff; }
<!--[if lt IE 7]>
#btnt-container a1.btntCloseImg { background:none; right:-14px; width:22px; height:26px; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEih9qMMLSQAWLFQF8L6oDqVM4l7kqZnXu6Ukxfbt_LIDQlQPLsSTHyc9_7dXQrLoeDkh2sOfGjGTqi-SvNTVhsgUVKRken2TWEIMZSyZTFUnnmec3tXWd2ubGw-651GX96P7lzUAVc0HuU/s38-p/x-mark-button-md.png',sizingMethod='scale'); }
#btntfollowForm1 input{ padding: 10px 5px 10px 32px; width: 93%; }
#btntfollowForm1 input[type=checkbox]{ width: 10px; padding: 0;}
<![endif]-->
</style>
<center>
<div id="backgroundPopup1">
<div id="popupContact1">
<div id="myword1">
<p>
Your Text here</p>
</div>
<center>
Your ADS Here. Adjust the size of this popup.</center>
<a href="" target="_blank" id="popupContactClose1">
</a>
</div></div></center>
<script src="http://yourjavascript.com/24315621361/jquery.cookie.js" type="text/javascript">
</script>
<script type="text/javascript">
var popupStatus1 = 0;
//this code will load popup with jQuery magic!
function loadPopup1(){
//loads popup only if it is disabled
if(popupStatus1==0){
$("#backgroundPopup1").fadeIn("slow");
$("#popupContact1").fadeIn("slow");
popupStatus1 = 1;
}
}
//This code will disable popup when click on x!
function disablePopup1(){
//disables popup only if it is enabled
if(popupStatus1==1){
$("#backgroundPopup1").fadeOut();
$("#popupContact1").fadeOut();
popupStatus1 = 0;
}
}
//this code will center popup
function centerPopup1(){
//request data for centering
var windowWidth1 = document.documentElement.clientWidth;
var windowHeight1 = document.documentElement.clientHeight;
var popupHeight1 = $("#popupContact1").height();
var popupWidth1 = $("#popupContact1").width();
//centering
$("#popupContact1").css({
"position": "absolute",
"top": windowHeight1/2-popupHeight1/2,
"left": windowWidth1/2-popupWidth1/2
});
//only need force for IE6
$("#backgroundPopup1").css({
"height": windowHeight1
});
}
var url1=window.location.href;
//CONTROLLING EVENTS IN jQuery
$(document).ready(function(){
if ($.cookie(url1) != 1) {
//centering with css
centerPopup1();
//load popup
loadPopup1();
}
//CLOSING POPUP
//Click the x event!
$("#popupContactClose1").click(function(){
disablePopup1();
$.cookie(url1, "1", { expires: 100 });
});
});
</script>
If you have any doubts in this section, Don't hesitate to contact me via comments conversations and your feedback are also welcomed.
Tags: Blogging Tips, popup advertisement, popup box scripts, popup code, popup html script, popup script, popup with close button, social share popup, styles up html, Website creation
If you like our Articles Collection Please Like or Plus or Share. It will helpful to improve our site. You can also subscribe with your email to get instance updates from our site.
|
Why you shouldn't use external Templates in blogger? Build new one up from its own basic templates.
