Jak zrobić efekt, ze po kliknieciu karty, wyskoczy okno z opcjami

pytanie zadane 26 września 2017 w JavaScript przez Justyna Obywatel (1,210 p.)

Hej mam listę, a w niej karty i pytanie brzmi jak zrobić efekt ze po kliknięciu karty wyskoczy okno z opcjami i przyciemnionym do okola tłem:

1 odpowiedź

odpowiedź 26 września 2017 przez Schizohatter Nałogowiec (39,600 p.)
wybrane 26 września 2017 przez Justyna

Najlepsza

Hasło: okno modalne

komentarz 26 września 2017 przez Justyna Obywatel (1,210 p.)

A mógłbyś coś więcej powiedzieć w czym i jak to zrobić ? bo znalazlam w sieci cos o frameworku foundation to w nim musze zrobic?, mam na mysli w czym najlepiej jest to zrobic?

komentarz 26 września 2017 przez Schizohatter Nałogowiec (39,600 p.)

Oczywiście różne frameworki CSS posiadają klasę okna modalnego, ale wystarczy znajomość CSSa.

https://www.webdesignerdepot.com/2012/10/creating-a-modal-window-with-html5-and-css3/

To jest sensowne rozwiązanie. Sam stosuję technikę :target. Zazwyczaj wystarcza.

Tak naprawdę samo okno modalne to kwestia CSS.

Otwieranie okna modalnego: :target albo JS.

komentarz 26 września 2017 przez Justyna Obywatel (1,210 p.)

Ok tylko upewnie sie, czyli to jest bardzo dobre rozwiazanie i sensowne tak ? :P bo tworzę prace na bazie Trello i chce to zrobic porzadnie :P

komentarz 26 września 2017 przez Schizohatter Nałogowiec (39,600 p.)

Ogólnie to rozwiązanie jest dobre. Osobiście zakodowałbym to nieco inaczej (np. wywalił zbędnego diva w środku modala i zastąpił go pseudoelementem), ale to jest szczegół.

Faworyzuję rozwiązanie oparte na :target, ale zależy ono od konkretnego przypadku - czy okno modalne powinno być "linkowalne", tzn. czy można komuś wysłać link do okna modalnego. Na mojej stronie: https://mortmortis.pl/portfolio.html :target mi sprzyja, bo okno modalne zawiera dodatkową treść, do której ktoś mógłby chcieć zalinkować.

W przypadku, kiedy okno modalne to np. "Czy chcesz usunąć ten post? Tak/Nie" to lepiej, żeby nie było linkowalne.

komentarz 26 września 2017 przez Justyna Obywatel (1,210 p.)

Ok

1. Czyli opcja :target da mi mozliwosc do podlinkowania tak?

2. Czy robiac ta opcja ze strony jestem w stanie zrobic zamkniecie okna po przez ESC lub kliknieciem w przyciemnione tło

komentarz 26 września 2017 przez Justyna Obywatel (1,210 p.)

Pytanie jeszcze czy to tez jest okno modalne?

komentarz 26 września 2017 przez Schizohatter Nałogowiec (39,600 p.)

1. Tak, ponieważ samo :target zakłada zmianę linku.

2. Nie, ponieważ zamknięcie takiego modala wymaga użycia linku <a>, który wyzeruje hash w adresie (#). Jeśli chcesz zamykać escapem lub kliknięciem w przyciemnione tło, musisz użyć JS w tym celu, żeby:

a) otworzyć i zamknąć modala

lub

b) tylko zamknąć modala przez zmianę hashu na #

Ogólnie okno modale to okno, które blokuje interakcję z resztą strony.

komentarz 26 września 2017 przez sc4rface Dyskutant (7,710 p.)

Fajny patent z tym targetem, nawet nie wiedziałem o takiej opcji - ja rozwiązałbym to fadeOutem w jQuery, a jak widać można jeszcze lżej.

komentarz 26 września 2017 przez Justyna Obywatel (1,210 p.)

Czyli te zdjecie ostatnie co dałam to tez okno modalne rozumiem,

I ostatnia rzecz czym to sie rozni od pop up box?

komentarz 26 września 2017 przez Schizohatter Nałogowiec (39,600 p.)

@Justyna

Ogólnie popupy to prehistoria - otwierały osobne okno w przeglądarce.

Teraz jeśli ktoś coś nazywa popupem to chyba mówi o zwykłym małym okienku na stronie, które od strony jest oderwane. Popup nie powinien blokować interakcji ze stroną. Modal blokuje. I tyle. Okno modalne ma zazwyczaj tę ciemną przysłonę zasłaniającą resztę strony.

@sc4rface

Tak, :target jest stosunkowo mało znany w środowisku newbie.