A
A
Anastasia2018-01-27 19:05:11
css
Anastasia, 2018-01-27 19:05:11

Why doesn't the :target pseudo selector work?

I'm making a modal window with css. The window is not called by clicking on the button. The button itself is pressed, but there is no window.
The code:

<a href="#go-video">Video tour</a>

<!---Popup for video tour-->
<div class="popup-overlay" id="go-video">
  <div class="popup-video">
    <a class="popup-close" href="index.html" onclick="return false">x</a>
    <iframe width="854" height="480" src="https://www.youtube.com/embed/ViZNgU-Yt-Y" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
  </div>
</div>

/*--------Popup for video tour--------*/
.popup-overlay {
  z-index: 1100;
  background-color: rgba(0,0,0,.85);
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  cursor: pointer;
  pointer-events: none;
  display: none;
}

.popup-overlay:target {
  display: block;
  pointer-events: auto;
}

.popup-video {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  height: 492px;
  width: 867px;	
}

Answer the question

In order to leave comments, you need to log in

1 answer(s)
A
Alex Glebov, 2018-01-27
@muxxomor

everything works
https://jsfiddle.net/nev154wp/

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question