Не удается закрыть Coverpop popup

Question

Я использую CoverPop, чтобы отобразить всплывающее окно для моих клиентов. Все кажется таким легким, но почему-то я не могу сделать всплывающее окно закрытым. Я вставил ссылку «закрыть», как описано в настройке. Однако, когда я нажимаю на нее, ничего не происходит.

Только способ закрыть всплывающее окно, нажав клавишу перехода на клавиатуре. Я знаю, это должно быть смешно для некоторых из вас. Однако я бы очень признателен за помощь.

Спасибо.

HTML

<script> 
    CoverPop.start({}); 
</script> 

<div id="CoverPop-cover" class="splash"> 
<div class="CoverPop-content splash-center"> 
<h2 class="splash-title">Willkommen bei Exsys <span class="bold">Schweiz</span></h2> 
<p class="splash-intro">Kunden aus Deutschland und anderen EU-Ländern wechseln bitte zu unserer <span class="bold">deutschen</span> Seite.</p> 
<img src="{$ShopURL}/templates/xt_grid/img/shop-ch.png" title="EXSYS Online-Shop Schweiz" height="60" style="margin: 0 20px 0 0;" alt="Schweizer Exsys-Shop"/> 
<a href="http://www.exsys.de/" alt="EXSYS Online-Shop Deutschland" title="EXSYS Online-Shop Deutschland"><img src="{$ShopURL}/templates/xt_grid/img/shop-de.png" height="60" alt="Shop Deutschland"/></a> 
<p class="close-splash"><a class="CoverPop-close" href="#">Close</a></p> 
</div><!--end .splash-center --> 
</div><!--end .splash --> 

CSS

.CoverPop-open, 
.CoverPop-open body { 
overflow: hidden; 
} 

#CoverPop-cover { 
display: none; 
position: fixed; 
overflow-y: scroll; 
top: 0; 
left: 0; 
right: 0; 
bottom: 0; 
z-index: 1000; 
-webkit-animation: fade-in .25s ease-in; 
-moz-animation-name: fade-in .25s ease-in; 
-ms-animation-name: fade-in .25s ease-in; 
-o-animation-name: fade-in .25s ease-in; 
animation-name: fade-in .25s ease-in; 
} 

.CoverPop-open #CoverPop-cover { 
    display: block; 
} 
.splash { 
    background-color:rgba(47, 99, 135, 0.9); 
} 

.splash-center { 
    background-color: white; 
    border-right: 8px solid #007ec8; 
    border-bottom: 8px solid #007ec8; 
    border-left: 8px solid #007ec8; 
    margin: 15px; 
    text-align: center; 
    top: 7px; 
    width: 15%; 
} 
.splash-center p{ 
    margin: 20px 10px; 

} 
.splash-center h2{ 
    font-size:16px; 
    width: 100%; 
    background:#007ec8; 
    padding: 10px 0; 
    color:#FFF; 
} 

JS

(function (CoverPop, undefined) { 

'use strict'; 

// set default settings 
var settings = { 

     // set default cover id 
     coverId: 'CoverPop-cover', 

     // duration (in days) before it pops up again 
     expires: 30, 

     // close if someone clicks an element with this class and prevent default action 
     closeClassNoDefault: 'CoverPop-close', 

     // close if someone clicks an element with this class and continue default action 
     closeClassDefault: 'CoverPop-close-go', 

     // change the cookie name 
     cookieName: '_ExsPop', 

     // on popup open function callback 
     onPopUpOpen: null, 

     // on popup close function callback 
     onPopUpClose: null, 

     // hash to append to url to force display of popup 
     forceHash: 'splash', 

     // hash to append to url to delay popup for 1 day 
     delayHash: 'go', 

     // close if the user clicks escape 
     closeOnEscape: true, 

     // set an optional delay (in milliseconds) before showing the popup 
     delay: 2000, 

     // automatically close the popup after a set amount of time (in milliseconds) 
     hideAfter: null 
    }, 


    // grab the elements to be used 
    $el = { 
     html: document.getElementsByTagName('html')[0], 
     cover: document.getElementById(settings.coverId), 
     closeClassDefaultEls: document.querySelectorAll('.' + settings.closeClassDefault), 
     closeClassNoDefaultEls: document.querySelectorAll('.' + settings.closeClassNoDefault) 
    }, 


    /** 
    * Helper methods 
    */ 

    util = { 

     hasClass: function(el, name) { 
      return new RegExp('(\\s|^)' + name + '(\\s|$)').test(el.className); 
     }, 

     addClass: function(el, name) { 
      if (!util.hasClass(el, name)) { 
       el.className += (el.className ? ' ' : '') + name; 
      } 
     }, 

     removeClass: function(el, name) { 
      if (util.hasClass(el, name)) { 
       el.className = el.className.replace(new RegExp('(\\s|^)' + name + '(\\s|$)'), ' ').replace(/^\s+|\s+$/g, ''); 
      } 
     }, 

     addListener: function(target, type, handler) { 
      if (target.addEventListener) { 
       target.addEventListener(type, handler, false); 
      } else if (target.attachEvent) { 
       target.attachEvent('on' + type, handler); 
      } 
     }, 

     removeListener: function(target, type, handler) { 
      if (target.removeEventListener) { 
       target.removeEventListener(type, handler, false); 
      } else if (target.detachEvent) { 
       target.detachEvent('on' + type, handler); 
      } 
     }, 

     isFunction: function(functionToCheck) { 
      var getType = {}; 
      return functionToCheck && getType.toString.call(functionToCheck) === '[object Function]'; 
     }, 

     setCookie: function(name, days) { 
      var date = new Date(); 
      date.setTime(+ date + (days * 86400000)); 
      document.cookie = name + '=true; expires=' + date.toGMTString() + '; path=/'; 
     }, 

     hasCookie: function(name) { 
      if (document.cookie.indexOf(name) !== -1) { 
       return true; 
      } 
      return false; 
     }, 

     // check if there is a hash in the url 
     hashExists: function(hash) { 
      if (window.location.hash.indexOf(hash) !== -1) { 
       return true; 
      } 
      return false; 
     }, 

     preventDefault: function(event) { 
      if (event.preventDefault) { 
       event.preventDefault(); 
      } else { 
       event.returnValue = false; 
      } 
     }, 

     mergeObj: function(obj1, obj2) { 
      for (var attr in obj2) { 
       obj1[attr] = obj2[attr]; 
      } 
     } 
    }, 


    /** 
    * Private Methods 
    */ 

    // close popup when user hits escape button 
    onDocUp = function(e) { 
     if (settings.closeOnEscape) { 
      if (e.keyCode === 27) { 
       CoverPop.close(); 
      } 
     } 
    }, 

    openCallback = function() { 

     // if not the default setting 
     if (settings.onPopUpOpen !== null) { 

      // make sure the callback is a function 
      if (util.isFunction(settings.onPopUpOpen)) { 
       settings.onPopUpOpen.call(); 
      } else { 
       throw new TypeError('CoverPop open callback must be a function.'); 
      } 
     } 
    }, 

    closeCallback = function() { 

     // if not the default setting 
     if (settings.onPopUpClose !== null) { 

      // make sure the callback is a function 
      if (util.isFunction(settings.onPopUpClose)) { 
       settings.onPopUpClose.call(); 
      } else { 
       throw new TypeError('CoverPop close callback must be a function.'); 
      } 
     } 
    }; 



/** 
* Public methods 
*/ 

CoverPop.open = function() { 

    var i, len; 

    if (util.hashExists(settings.delayHash)) { 
     util.setCookie(settings.cookieName, 1); // expire after 1 day 
     return; 
    } 

    util.addClass($el.html, 'CoverPop-open'); 

    // bind close events and prevent default event 
    if ($el.closeClassNoDefaultEls.length > 0) { 
     for (i=0, len = $el.closeClassNoDefaultEls.length; i < len; i++) { 
      util.addListener($el.closeClassNoDefaultEls[i], 'click', function(e) { 
       if (e.target === this) { 
        util.preventDefault(e); 
        CoverPop.close(); 
       } 
      }); 
     } 
    } 

    // bind close events and continue with default event 
    if ($el.closeClassDefaultEls.length > 0) { 
     for (i=0, len = $el.closeClassDefaultEls.length; i < len; i++) { 
      util.addListener($el.closeClassDefaultEls[i], 'click', function(e) { 
       if (e.target === this) { 
        CoverPop.close(); 
       } 
      }); 
     } 
    } 

    // bind escape detection to document 
    util.addListener(document, 'keyup', onDocUp); 
    openCallback(); 
}; 

CoverPop.close = function(e) { 
    util.removeClass($el.html, 'CoverPop-open'); 
    util.setCookie(settings.cookieName, settings.expires); 

    // unbind escape detection to document 
    util.removeListener(document, 'keyup', onDocUp); 
    closeCallback(); 
}; 

CoverPop.init = function(options) { 
    if (navigator.cookieEnabled) { 
     util.mergeObj(settings, options); 

     // check if there is a cookie or hash before proceeding 
     if (!util.hasCookie(settings.cookieName) || util.hashExists(settings.forceHash)) { 
      if (settings.delay === 0) { 
       CoverPop.open(); 
      } else { 
       // delay showing the popup 
       setTimeout(CoverPop.open, settings.delay); 
      } 
      if (settings.hideAfter) { 
       // hide popup after the set amount of time 
       setTimeout(CoverPop.close, settings.hideAfter + settings.delay); 
      } 
     } 
    } 
}; 

// alias 
CoverPop.start = function(options) { 
    CoverPop.init(options); 
}; 


}(window.CoverPop = window.CoverPop || {})); 

Дополнительная информация Я быстро проверил мой сайт и эти разделы, которые я нашел, где это событие щелчка мышью настоящее время. Честно говоря, я понятия не имею, как они мешают всплыванию.

// tabs 
$('ul.tabs').each(function(){ 

    var $active, $content, $links = $(this).find('a'); 

    $active = $links.first().addClass('active'); 
    $content = $($active.attr('rel')); 

    $links.not(':first').each(function() { 
     $($(this).attr('rel')).hide(); 
    }); 

    $(this).on('click', 'a', function(e){ 

     $active.removeClass('active'); 
     $content.hide(); 

     $active = $(this); 
     $content = $($(this).attr('rel')); 

     $active.addClass('active'); 
     $content.show(); 

     e.preventDefault(); 
    }); 
}); 

// track box clicks and route them to parent radio button 
$('div.box-hover').click(function(e) 
{ 
    $(this).find("input[type=radio]").click(); 
}); 
$('input[type=radio]').click(function(e){ 

    if (this.checked != true && $(this).hasClass('autosubmit')){ 
     this.checked = true; 
     this.form.submit(); 
    } 
    e.stopPropagation(); 
}); 

// track box clicks to show/hide some desc (shipping/payment) 
$('div.box-hover').click(function(e) 
{ 
    // ok. wir wollen clicks auf shipping abfangen 
    // und - laut tmpl - kann nur EIN passendes kind da sein 
    // also geht das mit dem length check! 
    if($(this).children('p.shipping-name').length > 0) 
    { 
     $('div.box-hover').children('p.shipping-desc').css('display','none'); 
     $(this).children('p.shipping-desc').css('display','block'); 
    } 
    if($(this).children('p.payment-name').length > 0) 
    { 
     $('div.box-hover').children('p.payment-desc').css('display','none'); 
     $(this).children('p.payment-desc').css('display','block'); 
    } 
}); 

// autosize the comment textarea 
$('#comments').autosize(); 

// slide in/out guest account form 
$("#guest").click(function(e){ 
    $("#cust_info_customers_password").val(''); 
    $("#cust_info_customers_password_confirm").val(''); 
    $('#guest-account').slideUp(250); 
}); 
$("#account").click(function(e){ 
    $('#guest-account').slideDown(250); 
}); 
}); 

Answer 1

@santadani, найдено, что существует правило следовать за имплантацией самого CoverPop. из вашей производственной среды, можете ли вы переместить <script type="text/javascript" src="http://www.exsys.ch/templates/xt_grid/javascript/CoverPop.js"></script> в конец документа, перед тегом </body> и повторите попытку?

Это потому, что я видел в источнике CoverPop, он захватывает элемент на скрипт загружен

$el = { 
     html: document.getElementsByTagName('html')[0], 
     cover: document.getElementById(settings.coverId), 
     closeClassDefaultEls: document.querySelectorAll('.' + settings.closeClassDefault), 
     closeClassNoDefaultEls: document.querySelectorAll('.' + settings.closeClassNoDefault) 
    }, 

который затем document.querySelectorAll('.' + settings.closeClassDefault) не будет извлекать ничего (еще потому сценарий был загружен до DOM готова, поэтому я предлагаю попытаться переместить тег сценария вниз)