How To Add Popups That Won't Be Blocked By Your Visitors' Website
By admin on Jan 1, 2010 | In Free Web Design Tutorials | Send feedback »
You may already be using two common types of popup blockers, which are software popup blockers or popup blocker comes as part of a web browser, browsers such as Mozilla firefox have a built in popup blocker and I believe microsoft and apple do as well.
Even though many people have popup blockers installed these days, those popup blockers generally stop automatically appearing popups which are the annoying type of popups, but generally they are clever enough not to block popups which are being asked for which appear when a visitor clicks a link or clicks a button.
Follow up:
For example on the webpage below I want to keep the visitor on this page instead of clicking on this link and be taken to a completely different website because this is really just some sub information within the webpage itself that is just a small piece of relevant information that doesn't deserve a page that is all to itself.

So if they click the link "Watch Forex Trading News" the forex trading news channel appears as a popup as you can see and that is a voluntary pop up that a visitor has asked for. And it gives more relevant information to this web page without having to browse away. So this is how popups can be useful.
However this type of popup does depend on javascript which s a web language that allows you to have functionality in your web pages beyond the functionality of html, as html can just display your web page which is in the content.
With that said a minority of people (usually technically inclined) would browse with javascript turned off for security reasons or other concerns, so it can sometimes be worth to including a small walkaround.
In this case if someone is browsing a website and they have javascript function turned off, generally if they click on a javascript popup link nothing will happen. This can be quite frustrating and you could potentially lose a customer or visitor.
So here is a small walkaround, and with this in your code even if someone with javascript turned off, they will still be able to see your webpage that you want them to see. What this piece of code does is to make the extra bit of information appear in a full browser window rather than a popup window.
Obviously this is better than a non functioning link if they happen to have javascript turned off.
So to demenstrate the way you can do this, here is a small webpage as shownbelow,

As you can see it starts with html tag ends with html, before the closing head tag it has a title tag plus some javascript code.
You don't need to worry about the exact code of this pop up because you can find a lot of pop up code online just by searching many of the free code websites, they have a lot of code that you can use. Or you can just copy the code here.
So you can see between that function popup() { ... } is the actual code.
window.open ("http://www.domainname.com", "null",...) the domain name in quotes is the address we are opening in the pop up, height is the height of the popup window which is 500 pixels; status equals no means you don't get a status bar in the popup, status bar refers to the bottom of the window as shown below, menubar is the bar of the top, as shown, you can change any of this to yes if you want to. top=30 means a 30 pixel gap from the top of the screen and a ten pixel gap from the left of the screen.


You can play around and change the elements to make it more customized
Then it comes to the body section of the html document which is of course just one line wrapping over in open and close paragraph tag and it is a clickable link, address after href is the address that you are going to; target="_blank" means open in new window.
The important bit is onclick="popup(); return false;" basically if the person that's visiting has javascript turned on then when someone clicked on this link it causes javascript popup and if the person is visiting has javascript turned off it ignores this because it doesn't have javascript functionality and instead it just opens google in a standard new explorer window. So you are covered for both cases.
You can do a simple lab in mozilla by turning off / on javascript:


You will notice with javascript function turned off your visitor will still be able to browse google fine in standard browsing window with the code introduced while do nothing with the following code:

Here you get the easy advantage by doing a small tweak :-)
If this all sounds too complicated you may want to try out this prewritten pop under tool which requires zero programming knowledge
Feedback awaiting moderation
This post has 9 feedbacks awaiting moderation...
Leave a comment
| « How to Format Borders For Your Tables | How to highlight your text in colors » |



