창 밖을 클릭하여 Jquery 팝업이 닫히는 것을 방지합니다.

Question

저는 JS/Jquery에서 멍청한 놈입니다. 아래의 코드를 사용하여 사용자가 입력하기 전에 &이 내 사이트의 ToS에 동의하도록 요구합니다. 문제가있는 경우 ESC를 누르거나 박스 바깥을 클릭하면 팝업 상자가 닫힙니다. 나는 이것을 방지하기 위해 사이트에 접근하기 위해 Agree 버튼을 클릭해야한다. (내 예제 ​​코드에서 그냥 'ddd') 어떤 도움을 주시면 감사하겠습니다. 잘 https://jsfiddle.net/gzx342xy/

jQuery(document).ready(function(){ 
 
    jQuery('a.agree-accept').click(function(){ 
 
     jQuery('#popup-container-box').fadeOut(); 
 
     jQuery('#active-popup-box').fadeOut(); 
 
    }); 
 

 
    var visits = jQuery.cookie('visits') || 0; 
 
    visits++; 
 
    
 
    jQuery.cookie('visits', visits, { expires: 0, path: '/' }); 
 
    
 
    console.debug(jQuery.cookie('visits')); 
 
    
 
    if (jQuery.cookie('visits') > 1) { 
 
    jQuery('#active-popup-box').hide(); 
 
    jQuery('#popup-container-box').hide(); 
 
    } else { 
 
     var pageHeight = jQuery(document).height(); 
 
     jQuery('<div id="active-popup-box"></div>').insertBefore('body'); 
 
     jQuery('#active-popup-box').css("height", pageHeight); 
 
     jQuery('#popup-container-box').show(); 
 
    } 
 

 
    if (jQuery.cookie('noShowWelcome')) { jQuery('#popup-container-box').hide(); jQuery('#active-popup-box').hide(); } 
 
}); 
 

 
jQuery(document).mouseup(function(e){ 
 
    var container = jQuery('#popup-container-box'); 
 
    
 
    if(!container.is(e.target)&& container.has(e.target).length === 0) 
 
    { 
 
    container.fadeOut(); 
 
    jQuery('#active-popup-box').fadeOut(); 
 
    } 
 

 
});

#active-popup-box { 
 
    background-color: rgba(0,0,0,0.5); 
 
    position: absolute; 
 
    width: 100vw; 
 
    height: 100vh; 
 
    top: 0; 
 
    left: 0; 
 
    z-index: 9999999999; 
 
    
 
} 
 
#popup-container-box { 
 
    left: 0; 
 
    right: 0; 
 
    top: 0; 
 
    bottom: 0; 
 
    margin: auto; 
 
    position: fixed; 
 
    width: 100px; 
 
    height: 100px; 
 
    background-color: #fff; 
 
    z-index: 99999999999; 
 
    display: none; 
 
} 
 
.modal-content-box { 
 
    position: relative; 
 
    text-align: center; 
 
} 
 

 
#popup-window-box { position: relative; } 
 

 

 
a.agree-accept { 
 
    position:relative; 
 
width: 25px!important; 
 
    float: right!important; 
 
    -webkit-transition: all 400ms ease-in-out; 
 
    transition: all 400ms ease-in-out; 
 
    background: transparent!important; 
 
    color: #555555!important; 
 
    border: none!important; 
 
    font-size: 35px!important; 
 
    padding: 0!important; 
 
    outline: 0; 
 
    cursor:pointer; 
 
    z-index: 99999; 
 
}

<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script> 
 
<script src="https://s3-us-west-2.amazonaws.com/bridgeconf2015/js/jquery.cookie.js"></script> 
 
<div id="popup-container-box"> 
 
    <a class="agree-accept">X</a> 
 
    <div id="popup-window-box animate slideInUp"> 
 
    </div> 
 
</div>

Answer 1

: 여기

은 JSFiddle에 대한 링크합니다 (JSFiddle에 내장되어 있기 때문에 아래 사용하여 외부 JS 파일 메신저와 보안 오류를 던지고이 링크를 사용)입니다 , 내가 말했듯이, 가장 좋은 방법은 jQuery UI에서 Dialog 위젯을 사용하는 것이다. 그 금지

, 마우스의 팝업 종료가 단순히를 제거하고 당신이 JQuery와 모바일 대화 상자를 사용하여 고려했다가