Can I change this CSS to make this popup work?

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:
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.


<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="" width="640" height="360" frameborder="0" allow="autoplay; fullscreen" allowfullscreen="" style="width: 640px; height: 360px;"></iframe>




.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 */

Hi there!

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

whoops - typo - the username should be

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