window popup blocker issue

Question

I am using the below script to popup a coupon window automatically. However, Chrome and other browsers are blocking the popup, as expcected. Is there a way to avoid this from being blocked by the pop-up blocker? Also, how do 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>

are you talking about the pop-ups filling my desktop when i open porn site? i have Faith In Unseen Things :-) — zod, Jun 07 '13 at 21:50

T.J. Crowder · Accepted Answer · 2013-06-07T21:55:25.613

Is there a way to avoid this from being blocked by the pop-up blocker?

Yes: Call window.open from within the event handler of a user-generated event, such as a click. This is the primary criterion browsers use when deciding whether to block a popup, as it gives at least some indication the user asked for something.

Rather than a pop-up, for something like this I would strongly recommend using a banner bar or similar. You'd 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 that 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;";
}

That will show the banner to users who don't have the cookie set yet. You'd probably want to have something in the banner that lets the user close it, which involves hooking user events on elements (a close button or similar). For instance:

<div id="first-time-banner" style="display: none">
    text here
    <span id="first-time-banner-close">X</span>
</div>

...with styling on the span to make it look nice. 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 slightly more complicated.)

Side note: Modern web user experience guidelines are to avoid popups whenever possible. — T.J. Crowder, Jun 07 '13 at 21:48
Thanks T.J. Crowder, but I'm not a programmer. How do I do this? What lines do I edit/modify? — Faith In Unseen Things, Jun 07 '13 at 21:49
@FaithInUnseenThings: Search for how to hook user events, you'll find lots and lots of examples. But fundamentally what that script is doing is trying to pop up a window when a user comes to the page if a cookie isn't set. That dog won't hunt. You can't pop up a window when the page is loading. And that's a Good Thing(tm). — T.J. Crowder, Jun 07 '13 at 21:51
I hope you don't mind if i added to the answer below; i upped your response as the correct answer for the javascript. Maybe we could just merge the answers? — Head, Jun 07 '13 at 21:52

score 1 · Answer 2 · answered Jun 07 '13 at 21:52

Also to center you would do something like so:

<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:

http://jsfiddle.net/Maikel1234/C5rRm/1/

window popup blocker issue

2 Answers2

Linked