javascript - 通过单击窗口外部防止 Jquery 弹出窗口关闭

Question

我对 JS/Jquery 完全是菜鸟，所以请耐心等待。我使用下面的代码要求用户接受并同意我的网站的服务条款，然后才能进入。唯一的问题是，如果您按 ESC 或单击框外，弹出框将关闭。我试图阻止这种情况，因此他们必须单击“同意”按钮才能访问该网站。 (在我的示例代码中，它只是一个“ddd”)任何帮助将不胜感激。

这里是 JSFiddle 的链接(使用此链接是因为下面内置的 JSFiddle 正在使用我使用的外部 JS 文件引发安全错误):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

嗯，正如我所说，最好的方法是使用 jQuery UI 中的对话框小部件。

除此之外，使鼠标弹出窗口关闭的代码是

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();
  }

});

只需删除它，它就不会淡出