Question

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

任何帮助？

这是external HTML sample，因为外部链接在代码段上不起作用。模态窗口链接到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>

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，但课程is-visible会设置width: 100。

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

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

隐藏时删除模态窗口链接

1 个答案: