Window popup problem
I am using below script to pop up coupon window automatically. However, Chrome and other browsers block the popup. Is there a way to avoid being blocked by a popup blocker? Also, how should I center it?
code:
<SCRIPT LANGUAGE="JavaScript">
<!--
function GetCookie(name) {
var arg=name+"=";
var alen=arg.length;
var clen=document.cookie.length;
var i=0;
while (i<clen) {
var j=i+alen;
if (document.cookie.substring(i,j)==arg)
return "here";
i=document.cookie.indexOf(" ",i)+1;
if (i==0) break;
}
return null;
}
var visit=GetCookie("COOKIE1");
if (visit==null){
var expire=new Date();
window.name = "thiswin";
newwin=open("popup.html", "dispwin",
"width=730,height=424,scrollbars=no,menubar=no");
document.cookie="COOKIE1=here; expires=Thu 01-01-2004 00:00:00 GMT;";
}
// -->
</SCRIPT>
source to share
Is there a way to avoid being blocked by a popup blocker?
Yes: Calling window.open
from an event handler a user generated event, eg click
. This is the main criterion used by browsers when deciding whether to block a popup, as it gives at least some guidance that the user has asked for something.
Instead of pop-up, for something like this, I highly recommend using a banner bar or similar. You have something like this in the markup at the top of the HTML:
<div id="first-time-banner" style="display: none">text here</div>
And then change the last bit of this code to:
if (visit==null){
var expire=new Date();
document.getElementById("first-time-banner").style.display = "block";
document.cookie="COOKIE1=here; expires=Thu 01-01-2004 00:00:00 GMT;";
}
This will show the banner to users who don't have a cookie set yet. You probably want the banner to have something that allows the user to close it, which has to do with attaching custom events to the elements (a close button or similar). For example:
<div id="first-time-banner" style="display: none">
text here
<span id="first-time-banner-close">X</span>
</div>
... with style on span
to make it look beautiful. Then:
document.getElementById("first-time-banner-close").onclick = function() {
document.getElementById("first-time-banner").style.display = "none";
};
(There are other ways to hook things up, but they're a little more complicated.)
source to share
Also, to focus, you would do something like this:
<div id="PopUpFad" style="left: 514.5px; opacity: 0.9999899999999999; position: absolute;
top: 50%;
left: 50%;
margin-top: -195px;
margin-left: -314px;" class="show"><div class="PopUpFadClose"><a href="#" onclick="PopUpFadCloseX()"><img src="http://livefitrevolution.org/wp-content/plugins/cool-fade-popup/close.jpg"></a></div><div><img src="http://livefitrevolution.org/wp-content/uploads/motivation-difference.jpg"></div></div>
Here's a fiddle for visual aid:
source to share