隐藏时删除模态 window link

Question

我有一个模态 window 和 link。该脚本使用 CSS 可见性来显示和隐藏 window，但是当隐藏时，link 保持活动状态，禁用模态 window 内的页面 links区域。

有什么帮助吗？

这是一个 external HTML sample，因为外部 link 不适用于代码段。模态 window links 到 google.com 和页面文本 links 到 whosebug.com.

jQuery(document).ready(function($){
  
  window.onload = setTimeout(function (){
    $(".bts-popup").delay(5000).addClass('is-visible');
 }, 3000);

window.onload = setTimeout(function (){
    $(".FOLLETO").delay(5000).addClass('is-visible');
 }, 3000); 
 
 
 //close popup
 $('.bts-popup').on('click', function(event){
  if( $(event.target).is('.close') || $(event.target).is('.bts-popup') || $(event.target).is('.bts-popup-container') ) {
   event.preventDefault();
   $(this).removeClass('is-visible');
  }
 });
 //close popup when clicking the esc keyboard button
 $(document).keyup(function(event){
     if(event.which=='27'){
      $('.bts-popup').removeClass('is-visible');
     }
    });
});

.bts-popup {
  position: fixed;
  overflow:auto;
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
  background-color: rgba(0, 25, 28, 0.55);
  opacity: 0;
  visibility: hidden;
  -webkit-transition: opacity 0.3s 0s, visibility 0s 0.3s;
  -moz-transition: opacity 0.3s 0s, visibility 0s 0.3s;
  transition: opacity 0.3s 0s, visibility 0s 0.3s;
  z-index: 9999;
}
.bts-popup.is-visible {
  opacity: 1;
  visibility: visible;
  -webkit-transition: opacity 1s 0s, visibility 1s 0s;
  -moz-transition: opacity 1s 0s, visibility 1s 0s;
  transition: opacity 1s 0s, visibility 1s 0s;
}

.bts-popup-container {
  position: relative;
  width: 100%;
  max-width: 600px;
  margin: 8em auto;
  text-align: center;
  /* Force Hardware Acceleration in WebKit */
  -webkit-backface-visibility: hidden;
  -webkit-transition-property: -webkit-transform;
  -moz-transition-property: -moz-transform;
  transition-property: transform;
  -webkit-transition-duration: 0.3s;
  -moz-transition-duration: 0.3s;
  transition-duration: 0.3s;
}

.bts-popup .close {
  position: absolute;
  top: 0%;
  right: 2%;
  font-size: 4em;
  font-weight: bold;
  text-decoration: none;
  color: #FF9760;
}
.bts-popup .close:hover {
  color: #FC621A;
}
.FOLLETO { opacity: 0;
  visibility: hidden;}
.FOLLETO.is-visible
{opacity: 1;
  visibility: visible;
-webkit-animation: spin1 0.5s 1 linear;
-moz-animation: spin1 0.5s 1 linear;
-o-animation: spin1 0.5s 1 linear;
-ms-animation: spin1 0.5s 1 linear;
animation: spin1 0.5s 1 linear;
display: block;
}

@-webkit-keyframes spin1 {
0% { -webkit-transform: rotateX(0deg) scale(0.1)}
100% { -webkit-transform: rotateX(360deg) scale(1)}
}
@-moz-keyframes spin1 {
0% { -webkit-transform: rotateX(0deg) scale(0.1)}
100% { -webkit-transform: rotateX(360deg) scale(1)}
}
@-o-keyframes spin1 {
0% { -webkit-transform: rotateX(0deg) scale(0.1)}
100% { -webkit-transform: rotateX(360deg) scale(1)}
}
@-ms-keyframes spin1 {
0% { -webkit-transform: rotateX(0deg) scale(0.1)}
100% { -webkit-transform: rotateX(360deg) scale(1)}
}
@-keyframes spin1 {
0% { -webkit-transform: rotateX(0deg) scale(0.1)}
100% { -webkit-transform: rotateX(360deg) scale(1)}
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<body style="background-color:red; "><div style="height:100%; width:100%; font-size:120px; text-align:center; padding-top:200px"><a href="https://whosebug.com/">hello</a></div>

<div class="bts-popup" role="alert">
<a href="#page" class="close">&times;</a>

<div class="bts-popup-container">

<a class="FOLLETO" href="https://google.com"> <img src="https://orig00.deviantart.net/4740/f/2013/164/9/8/rainbow_text_art_by_shadowcal-d68vjm8.jpg" width="100%"></a>
</div> 
  
</div>

</body>

Answer 1

有很多方法可以做到，但最直接的方法是使用 display: none 代替 visible。

Visbility leaves it smack on the page even tho its "invisible", which is not what you want.

现在，如果 display: none 不适用于您的用例，您还可以进行类似修改 width 的操作。例如。弹出窗口默认设置为 width: 0 但 class is-visible 将设置 width: 100.

您也可以使用 z-index，但我认为上面的两个规则更直接。

编辑 w/ 以这种方式使用 width 的示例： https://codepen.io/uncleoptimus/pen/gedorQ

隐藏时删除模态 window link

Remove modal window link when is hidden

html

javascript

css

modal-window