Почему этот всплывающий оверлей не работает правильно? - PullRequest
Новая
       38

Почему этот всплывающий оверлей не работает правильно?

1 голос
/ 03 июля 2019

Я использую конструктор сайтов для создания сайта и у меня проблема с наложением всплывающих окон.Я повторил проблему, но вам необходимо войти в систему, чтобы увидеть ее.

Пожалуйста, войдите здесь: https://auth.cargo.site/login

Со следующими данными:

  • user: temp4321@malinator.com
  • пароль: temp4321

Затем откройте действующий сайт в другой вкладке: https://temp4321.cargo.site

Предполагается всплывающее окно с видеопоявляются, когда вы нажимаете на изображение, как оно делает, но я также хочу иметь возможность воспроизводить видео и иметь возможность щелкать вне всплывающего окна, чтобы закрыть его.В настоящее время я могу только включить видео iframe или функцию close.

  • Здесь - это шаги для просмотра и редактирования HTML и CSS с использованием вышеуказанного имени входа.

  • Я попытался изменитьz-index но это не решило проблему.

мой код: 

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

Ожидайте, что сможете одновременно взаимодействовать со встроенным видео и закрывать всплывающее окно, но в настоящее время это одно или другое.

...