Remove modal window link when is hidden

Question

I have a modal window with a link. The script uses CSS visibility to show and hide the window, but when is hidden, the link remains active disabling the page links inside the modal window area.

Any help?

This is an external HTML sample because the external links doesn't work on the snippet. The modal window links to google.com and the page text links to 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>

have you tried adding 'is-visible' to the <a href="stackoverflow.com/">hello</a> — Squish

uncleoptimus uncleoptimus · Accepted Answer · 2018-04-05T01:08:15

There are a bunch of ways to do it but the most immediate would be using display: none in place of visible.

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

Now if display: none is not applicable for your use case, you could also go with something like modifying the width. E.g. The popup is set by default to width: 0 but the class is-visible would then set width: 100.

You could also play with z-index but the two rules above are way more straightforward, I think.

Edit w/ example of using width in this way: https://codepen.io/uncleoptimus/pen/gedorQ

Remove modal window link when is hidden

1 Answers