Проблема блокировщика всплывающих окон

Question

Я использую приведенный ниже скрипт, чтобы автоматически открыть окно купона. Тем не менее, Chrome и другие браузеры блокируют всплывающее окно, как указано выше. Есть ли способ избежать блокирования всплывающих окон? Кроме того, как мне это отцентрировать?

Код:

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

Answer 1

Есть ли способ избежать блокирования всплывающих окон?

Да: звоните window.open из обработчика события сгенерированного пользователем события, такого как click, Это основной критерий, который используют браузеры при принятии решения, блокировать ли всплывающее окно, поскольку оно дает хотя бы некоторое указание, о котором пользователь что-то просил.

---

Вместо всплывающих окон, для чего-то подобного я настоятельно рекомендую использовать панель баннеров или аналогичную. У вас будет что-то вроде этого в разметке в верхней части HTML:

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

И затем измените последний бит этого кода на:

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;";
}

Это покажет баннер пользователям, у которых еще не настроен файл cookie. Возможно, вы захотите, чтобы в баннере было что-то, что позволяет пользователю закрывать его, что включает в себя перехват пользовательских событий в элементах (кнопка закрытия или аналогичная). Например:

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

... со стилем на span чтобы это выглядело красиво. Затем:

document.getElementById("first-time-banner-close").onclick = function() {
    document.getElementById("first-time-banner").style.display = "none";
};

(Существуют и другие способы подключения, но они немного сложнее.)

Answer 2

Также для центра вы бы сделали что-то вроде этого:

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

Вот скрипка для визуальной помощи:

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