Whats up ABCD: Add a Popup Box with Close Button to a Your Blog : Direct Popup HTML script code

   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

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

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:

2.Social Share box float right all the time : Floating 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>

3.Facebook Share Request Popup Box HTML Script code (Big and Force to share):

4.Popup code to show Floating Ads for each view of your site pages first time.

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.

Thanks for your visit, Subscribe with us to get updates immediately to your inbox : Contents : Whats up Here

Whats up ABCD

Labels

15 June 2016

Add a Popup Box with Close Button to a Your Blog : Direct Popup HTML script code

Positioning your popup

Some Sample Popup HTML Scripts Codes

No comments:

Post a Comment

Whats up to Read<>