@Katusha47

Открытое окно popup при перезагрузке страницы, как скрыть?

https://codepen.io/suxgmqrl/pen/JjEZbWQ

<p>
      This is the main content. To display a lightbox click
      <a
        href="javascript:void(0)"
        onclick="document.getElementById('light').style.display='block';document.getElementById('fade').style.display='block'"
        >here</a
      >
    </p>
    <div id="light" class="white_content">
      <a
        href="javascript:void(0)"
        onclick="document.getElementById('light').style.display='none';document.getElementById('fade').style.display='none'"
      >
        <div class="close_popup">Close</div></a
      >
      <h6 class="popup_title">This is the lightbox content.</h6>
      <p class="popup_text">
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Maxime aperiam
        similique aspernatur temporibus ipsa asperiores exercitationem voluptas
        nisi expedita corporis?
      </p>
      <div class="popup_button">
        <button type="button" class="btn btn-primary btn-lg btn_popup">
          Primary
        </button>
        &nbsp;
      </div>
    </div>
    <div id="fade" class="black_overlay"></div>

/*popup*/
      .black_overlay {
        display: none;
        position: absolute;
        top: 0%;
        left: 0%;
        width: 100%;
        height: 100%;
        background-color: black;
        z-index: 1001;
        -moz-opacity: 0.8;
        opacity: 0.8;
        filter: alpha(opacity=80);
      }
      .white_content {
        display: none;
        position: fixed;
        display: flex;
        top: 25%;
        left: 25%;
        width: 50%;
        height: 50%;
        padding: 16px;
        border: none;
        box-shadow: rgba(0, 0, 0, 0.384);
        background-color: white;
        border-radius: 20px;
        z-index: 1002;
        overflow: auto;
        animation: fade 0.6s;
      }
      .popup_title {
        text-align: center;
      }
      .popup_text {
        text-align: center;
        justify-content: center;
        align-items: center;
        padding: 30px;
      }
      .popup_button {
        text-align: center;
        position: absolute;
        margin: 0;
        -ms-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
        left: 50%;
      }
      .btn_popup {
        width: 200px;
      }
      .close_popup {
        text-align: right;
        margin-right: 30px;
      }
  • Вопрос задан
  • 52 просмотра
Решения вопроса 2
В селекторе .white_content display: none выше не работает. Он перезаписывается display: flex;
Ответ написан
@neuroscript
#light {display: none;}
#fade {display: none;}
id имеет приоритет, над class.
Да и посмотри как у других сделаны попапы. Чтоб закрывался не только при нажатии на Х а просто вне попапа.

p.s.
visibility: hidden - не рекомендуется, если позиция не абсолютная и если в попапе есть видео. При исчезновении, видео продолжит играть. А display: none; его отрубит.
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы