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

Question

[Katusha47]

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;
      }

Comments

[Pr0grammer]

Я бы на вашем месте поставил Бы весь код на JSfiddle или Codepen

[Katusha47]

Добавила ссылку

Answer 1

[Олег Олегович]

В селекторе .white_content display: none выше не работает. Он перезаписывается display: flex;

Comments

[Katusha47]

Добавила visibility: hidden; при нажатии на ссылку отображается только полупрозрачный темный фон без popup

[Олег Олегович]

Убрал display: flex; в .white_content и все работает.

[Katusha47]

Спасибо)

Answer 2

[neuroscript]

#light {display: none;}
#fade {display: none;}
id имеет приоритет, над class.
Да и посмотри как у других сделаны попапы. Чтоб закрывался не только при нажатии на Х а просто вне попапа.

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

Comments

[Katusha47]

Спасибо. всё заработало как надо!

[neuroscript]

Katusha47, тогда нажмите, что ответ получен )

[Katusha47]