隐藏时删除模式窗口链接

我有一个带有链接的模态窗口。该脚本使用CSS可见性显示和隐藏窗口，但是当隐藏窗口时，该链接仍处于活动状态，禁用模态窗口区域内的页面链接。

有帮助吗？

这是一个外部HTML样本，因为外部链接在片段上不起作用。模式窗口链接到Google.com和页面文本链接到stackoverflow.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://stackoverflow.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>

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

粘性使它在页面上sm刺，甚至是"看不见的"，这不是您想要的。

现在，如果display: none不适用于您的用例，您也可以使用修改width之类的东西。例如。默认情况下将弹出窗口设置为width: 0，但是类is-visible将设置width: 100。

您也可以使用z-index，但是上面的两个规则更加简单，我认为

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

相关内容

最新更新

热门标签：