Pojawiający się span na stronie, gdy inne elementy są ukryte

Question

Witam, dzisiaj zacząłem się bawić jak zrobić klasycznego popupa, wszystko szło dobrze do momentu, gdy chciałem za pomocą jquery sprawić by element był widoczny dodając mu określoną klase "active". Zauważyłem, że wszystkie inne elementy: div.top, div.middle, div.bottom znikają, gdy rodzic div.modal otrzyma również tą samą klasę. Span jest również dzieckiem diva, a jako jedyny nadal jest widoczny w prawym górnym rogu co jest przyczyną takiego zachowania??

https://jsfiddle.net/Lpaw52fs/

Comments

Na JSFiddle brakuje Twojego skryptu.

---

Fakt moja wtopa, nowy link:

https://jsfiddle.net/bhwz4nrv/

Answer 1

Dodaj do Twojego kodu css ten zapis

      .modal-wrap * {
        border: 2px solid red;
      }

i zobacz gdzie znajduje się element <section class="modal-wrap"> wraz z jego zawartością ("nie znika") .

 

Zauważyłem, że wszystkie inne elementy: div.top, div.middle, div.bottom znikają

nie znikają tylko znajdują się "na dole" strony,

.article {
  ...

  min-height: 200vh;
}

są "niewidoczne" (div.top itd.), bo nie zawierają kontentu (np. tekstu).

      <div class="modal">
        <div class="top">Top</div>
        <div class="middle">Middle</div>
        <div class="bottom">Bottom</div>
        <span class="hide">X</span>
      </div>

 

BTW, lepiej jest użyć
np. display: none dla noactive i np. display: block dla active.

 

przykład

• z display [ on-line ]
• z visibility, opacity [ on-line ]
• efekt blur można już "dodać" do samego modal-a za pomocą: backdrop-filter [ 1 ] [ 2 ] [ on-line ]

 

P.S. Moim zdaniem dobrze jest ustawić dla modal-a z-index (choć nie jest to "przymus").

• ciekawy efekt z conic-gradient [ 1 ] [ 2 ] [ on-line ]
• animacja css [ 1 ]  + tło (np. gif)  [ on-line ]

Comments

Dziękuje za rozjaśnienie, efekt z animacją rzeczywiście daje fajny efekt, lepszy niż standardowy blur :D