Can I change this CSS to make this popup work?

HTML-CSS
1

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:

    43
    43921×848 88.9 KB

  • 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 */
}
2

Hi there!

The login info you provided isn’t working, I’m getting a error that either the username or password is wrong.

3

whoops - typo - the username should be temp4321@mailinator.com

4

I didn’t look at the site but elements have to use position for z-index to work (try position: relative on .popup).

1 Like