• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

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

Object Storage Arubacloud
0 głosów
102 wizyt
pytanie zadane 16 października 2022 w HTML i CSS przez jasper93 Obywatel (1,310 p.)
edycja 16 października 2022 przez jasper93
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/
komentarz 16 października 2022 przez ScriptyChris Mędrzec (190,190 p.)
Na JSFiddle brakuje Twojego skryptu.
komentarz 16 października 2022 przez jasper93 Obywatel (1,310 p.)
Fakt moja wtopa, nowy link:

https://jsfiddle.net/bhwz4nrv/

1 odpowiedź

0 głosów
odpowiedź 17 października 2022 przez VBService Ekspert (254,570 p.)
wybrane 18 października 2022 przez jasper93
 
Najlepsza

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") wink.

 

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

  • display [ on-line ]
  • 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").

1
komentarz 18 października 2022 przez jasper93 Obywatel (1,310 p.)
Dziękuje za rozjaśnienie, efekt z animacją rzeczywiście daje fajny efekt, lepszy niż standardowy blur :D

Podobne pytania

0 głosów
1 odpowiedź 134 wizyt
0 głosów
2 odpowiedzi 1,611 wizyt
pytanie zadane 20 stycznia 2020 w C i C++ przez Karpik Użytkownik (680 p.)
0 głosów
1 odpowiedź 197 wizyt

92,684 zapytań

141,589 odpowiedzi

320,073 komentarzy

62,044 pasjonatów

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj.

Akademia Sekuraka

Niedawno wystartował dodruk tej świetnej, rozchwytywanej książki (około 940 stron). Mamy dla Was kod: pasja (wpiszcie go w koszyku), dzięki któremu otrzymujemy 10% zniżki - dziękujemy zaprzyjaźnionej ekipie Sekuraka za taki bonus dla Pasjonatów! Książka to pierwszy tom z serii o ITsec, który łagodnie wprowadzi w świat bezpieczeństwa IT każdą osobę - warto, polecamy!

...