1 Replies - 378 Views - Last Post: 03 July 2019 - 08:27 AM

#1 Simon593   User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 2
  • Joined: 03-July 19

Can I change this CSS to make this popup work?

Posted 03 July 2019 - 04:25 AM

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: [email protected]
password: temp4321

Then open the live site in another tab: https://temp4321.cargo.site

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: https://imgur.com/a/gswAHTN



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

Attached image(s)

  • Attached Image


Is This A Good Question/Topic? 0
  • +

Replies To: Can I change this CSS to make this popup work?

#2 Simon593   User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 2
  • Joined: 03-July 19

Re: Can I change this CSS to make this popup work?

Posted 03 July 2019 - 08:27 AM

Sorry there is a typo here. The username is: [email protected]
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1