Jak zrobić takie okno dialogowe?

pytanie zadane 17 lutego 2017 w HTML i CSS przez Vorex444 Dyskutant (9,610 p.)
zamknięte 17 lutego 2017 przez Vorex444

Cześć mam pytanie jak zrobić takie okno dialogowe? Nie chce używać żadnych alertów itp.

Dokładniej chce zrobić coś takiego, że gdy kliknie na daną rzecz ma się wyświetlić takie okno dialogowe.

Wiem jak zrobić funkcje, którą po kliknieciu czegoś zrobić coś, ale nie potrafię nawet zacząć robić takiego okna dialogowego.

Ktoś coś podpowie?
Może jakiś link gdzie można się tego nauczyć?

Nie dawajcie linka do bootstrapów.

komentarz zamknięcia: Problem rozwiazany.

2 odpowiedzi

odpowiedź 17 lutego 2017 przez Zacherini Użytkownik (510 p.)
wybrane 17 lutego 2017 przez Vorex444

Najlepsza

Cześć,

Jest kilka sposobów na uzyskanie takiego okienka przypominającego newsletter'er. Całość opiera się na stworzeniu w dokumencie HTML dwóch elementów. Pierwszym z nich jest wiadomość jaką chcesz wyświetlić po zadanym zdarzeniu użytkownika i oscylowanie go css'em zgodnie z założeniami. Drugim rzeczą jest stworzenie elementu odpowiedzialnego za czarne, prześwitujące tło (rgba), które będzie szerokie i wysokie na 100% ekranu użytkownika. Następnie chcemy żeby elementy te, po załadowaniu dokumentu były niewidoczne dlatego też, nadajemy utworzonym elementom właściwość 'display' na 'none', oraz tworzymy w dokumencie CSS nową klasę o właściwości np: display:block (chcemy, aby klasa ta była dodawana lub usuwana na zadane zdarzenie użytkownika np: kliknięcie) . No a jeśli chodzi o JS'a to z tego co napisałeś wiesz jak już zrobić.

komentarz 17 lutego 2017 przez Zacherini Użytkownik (510 p.)

+ oczywiście pozostaje manipulacja z-index'em (pamiętaj, że z-index działa wyłącznie z właściwością CSS: position..), czarne tło ustawiasz na np.: z-index: 2, a wiadomość którą wyświetlasz na z-index:3.

odpowiedź 17 lutego 2017 przez mtk3d Nałogowiec (46,690 p.)

Div z position: absolute;, ustawiony na środku i display: none;. Dajesz go gdzieś na samym końcu i powinno grać.

komentarz 17 lutego 2017 przez Vorex444 Dyskutant (9,610 p.)

Nic nie zrozumiałem :D, można jaśniej? :D

komentarz 17 lutego 2017 przez niezalogowany

koledze tutaj chyba chodzi o coś takiego: tworzysz sobie takiego diva np. id="newsletter", który obejmuje całą stronę i ma w stylach css position: absolute, ma np background: grey i np. opacity 0.5 (możesz również dać kolor jako rgba, obsługuje to więcej przeglądarek) tworzysz sobie (tak jakbyś tworzył normalną stronkę) środek tego co wysłałeś czyli kolejnego diva np. class="newsletter_content" wewnątrz diva o id="newsletter"

Jak już to zrobisz to diva id="newsletter" w stylach css robisz display: none; no i mówisz, że wiesz jak zrobić taką funkcję to już sobie poradzisz. Podpowiem: za pomocą JS przypisujesz atrybut css do diva id="newsletter" display: block; na przykład