Coverpop 팝업을 닫을 수 없습니다

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 자체의 영향 때문에 따라야하는 규칙이 있습니다. 프로덕션 환경에서 </body> 태그 앞에 <script type="text/javascript" src="http://www.exsys.ch/templates/xt_grid/javascript/CoverPop.js"></script>을 문서 끝에 넣고 다시 시도 할 수 있습니까? 스크립트가 DOM 전에로드를 변경할 수 없기 내가 CoverPop 소스에서 본 때문이다

, 그것은 스크립트에 요소를 잡고

는 다음 document.querySelectorAll('.' + settings.closeClassDefault) 아무것도 검색하지 않습니다

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

을로드 (따라서 준비 내가 스크립트 태그를 아래로 이동하려고하는 것이 좋습니다)