Question

我是JS / Jquery的总菜鸟所以请耐心等待。我使用下面的代码要求用户接受＆amp;在他们进入之前同意我的网站的ToS。唯一的问题是，如果您按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中的Dialog小部件。

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

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

});

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

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

1 个答案: