I am using website builder cargo to make a site and having a problem with a popup overlay. I have replicated the problem but you need to login to see it.
Please login here: https://auth.cargo.site/login
user: temp4321@mailinator.com
password: temp4321
Then open the live site in another tab - same address as above without the ‘login’
The intention is for a video popup appear when you click on the image as it is doing but I also want to be able to play the video and be able to click outside the popup to close it. Currently I can only have the video iframe working or the close function working.
-
Here are the steps to see and edit the HTML and CSS using the login above:
-
I tried changing the z-index’s but it diodn’t solve it. Thank you for any suggestions.
HTML
<a href="#popup1" class="image-link">{image 2}</a>
<div id="popup1" class="overlay full-pointer-events-none">
<div class="popup">
<a class="divLink" href="javascript:history.back()"></a>
<div class="pop-content">
<iframe src="https://player.vimeo.com/video/298200022" width="640" height="360" frameborder="0" allow="autoplay; fullscreen" allowfullscreen="" style="width: 640px; height: 360px;"></iframe>
</div>
</div>
</div>
CSS
.overlay {
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: rgba(232, 12, 12, 0.7);
transition: opacity 50ms;
visibility: hidden;
opacity: 0;
z-index: 9999;
}
.overlay:target {
visibility: visible;
opacity: 1;
z-index: 9999;
}
.popup {
margin: auto;
text-align: center;
padding: 200px;
background: transparent;
border-radius: 0px;
z-index: 2;
}
.pop-content {
z-index: 2;
background: rgba(232, 232, 12, 0.7);
}
a.divLink {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
text-decoration: none;
/* Makes sure the link doesn't get underlined */
z-index: 1;
/* raises anchor tag above everything else in div */
background-color: white;
/*workaround to make clickable in IE */
opacity: 0;
/*workaround to make clickable in IE */
filter: alpha(opacity=0);
/*workaround to make clickable in IE */
}