Ostatnio zrobiłem skok z tworzenia fullstack aplikacji Ruby do pracy z Javascript. Jak być może już wiesz, Javascript pozwala użytkownikom lub klientom na interakcję ze stroną internetową i dynamiczne renderowanie nowej zawartości do drzewa DOM w oparciu o interaktywność użytkownika. W porównaniu z kodowaniem w Ruby on Rails (w którym każdy rerender wymaga odświeżenia całej strony), możliwość rerendowania różnych elementów strony w oparciu o interakcje użytkownika z Javascript przyniosła moje umiejętności programistyczne z 1994 roku i do teraźniejszości. Dzięki Mojej podstawowej wiedzy na temat Javascript, mogę teraz stworzyć interaktywny element internetowy, który chciałem zaimplementować w moich projektach: skrzynki z wiadomościami-lub popupy.

modalne okno dialogowe to okno komunikatu, które pojawia się w przeglądarce po określonej interaktywności użytkownika. Zanim zagłębimy się w specyfikę tworzenia modalnego pudełka dla Twojej witryny z HTML, CSS i Javascript, najpierw przejrzyj różne typy skrzynek wiadomości, które możesz napotkać.

alerty

alert to okno wiadomości, zazwyczaj zablokowane w przeglądarce, które wymaga reakcji użytkownika lub interakcji, zanim zostanie odrzucone i zniknie ze strony. Być może chcesz, aby Klient potwierdził informacje (Warunki użytkowania) lub sama strona potwierdza wypełnienie formularza. Jednak dopóki alert nie zostanie odrzucony, klient nie może wchodzić w interakcje z resztą strony.

popup

popup to lepkie („przykleja się” do strony, a nie lepkie jak cukierki) okno wiadomości, które pojawia się w przeglądarce, które nie wymaga natychmiastowej interakcji ani uwagi. Jeśli użytkownik chce, aby zniknęły, musi zamknąć lub wejść w interakcję z wyskakującym okienkiem w tym czasie, ale interaktywność reszty strony nadal działa. Powiadomienia są przykładem wyskakującego okienka.

Growl Notification/Flash Notice

A growl notification is a popup that dismisses itself after an associated period of time. These are sometimes also referred to as flash notices. Użytkownik może wchodzić w interakcje z powiadomieniem growl-być może zamknąć okno wiadomości wcześnie, lub kliknąć przycisk w powiadomieniu – lub może zignorować i zniknie po wygaśnięciu timera. Podobnie jak wyskakujące okienko, powiadomienie growl pozwala klientowi kontynuować interakcję z resztą strony. Przykładem tego jest wiadomość e-mail lub powiadomienie w mediach społecznościowych.

Lightbox/Theatre

Lightbox lub teatr to skrzynka z wiadomościami, która zazwyczaj powiększa zawartość, która była już dostępna w przeglądarce, aby użytkownik mógł się na niej skupić. Częstym przypadkiem użycia jest obraz lub seria obrazów wyświetlanych w galerii. Gdy lightbox lub teatr jest wyposażony w wiele elementów, uznaje się go za „zablokowany”, gdy użytkownik może poruszać się po powiązanych treściach w samym lightboxie, zamiast powracać do oryginalnej strony, a następnie klikać następny obraz w serii, aby powiększyć.

popover/hovercard

jedno z mniejszych okienek wiadomości, popover lub poduszkowiec pojawia się na ekranie tylko wtedy, gdy użytkownik najedzie myszą na wybrany obszar. Te pola wiadomości mogą zawierać instrukcje lub wyjaśnienia dotyczące przycisku lub kontenera, nad którym użytkownik aktualnie znajduje kursor; mogą one również zawierać podgląd informacji dostępnych, jeśli użytkownik kliknie łącze.

modal/okno dialogowe

wreszcie, Modal lub okno dialogowe to okno wiadomości, które pozwala na dalszą interaktywność strony bez odchodzenia od bieżącej zawartości w przeglądarce. Okno modalne nie jest zablokowane do ekranu (tj., klient może od niego odchodzić bez wymaganej interakcji), choć zazwyczaj jest to skupienie użytkownika (w oparciu o stylizację pudełka). W większości przypadków, jeśli użytkownik chce zamknąć modal, może po prostu zamknąć pole za pomocą dostarczonego przycisku lub kliknąć poza modal. Przykładem modalu jest sytuacja, gdy użytkownik musi wypełnić formularz lub podać określone informacje dla zapytania, ale nie chcesz, aby przechodził do innej strony.

implementacja modalu

aby utworzyć i zaimplementować modal na swojej stronie, musisz wykonać trzy kroki dla funkcjonalności:

1. HTML: znaczniki do utworzenia elementu modalnego
2. CSS: stylizacja do określenia, jak Twój modal wygląda i pojawia się na stronie
3. JavaScript: umieszczanie detektorów zdarzeń tak, aby modal pojawiał się/znikał w zależności od twojej interaktywności użytkownika

HTML

dla najprostszych modali potrzebujemy przycisku (lub dowolnego elementu strony, który wolisz), który użytkownik może kliknąć, aby aktywować modal, rzeczywisty modal, i prawdopodobnie będziesz chciał zaimplementować przycisk Zamknij w modalu.

<button> click me, I make a modal</button><div class="modal">
<div class="modal-content">
<span class="close-btn">&times;</span>
<p>this is the text inside the modal</p>
</div>
</div>

w powyższym przykładzie widać, że mamy przycisk, który pojawi się w naszym HTML, a także modalny, z trzema klasami CSS: modalmodal-btn I close-btn. Każdy z nich będzie zawarty w CSS poniżej. Pierwszy div jest kontenerem nadrzędnym, który zawiera cały modal Z klasą modal. Wewnętrznie mamy div, który zawiera zawartość samego modalu: przycisk do zamknięcia modalu wspan I tekst w znacznikup.

jako szybki bok, możesz również zaimplementować nagłówki i stopki w modalu, po prostu tworząc więcej div w HTML i dalszych klasach CSS do celów stylizacji. Na przykład:

<div class="modal">
<div class="modal-header">
<span class="close-btn">&times;</span>
<h1>I am the Header</h1>
</div>
<div class="modal-content">
<p>this is the text inside the modal</p>
</div>
<div class="modal-footer">
<h2>I am the Footer</h2>
</div>
</div>

CSS

aby stylizować każdy z elementów w naszym prostym modalnym HTML, musimy utworzyć powiązane klasy CSS: .modal.modal-content I .close-btn. Co więcej, możesz zobaczyć poniżej, że istnieje również CSS do tworzenia animacji dla modalu.

.modal {
display: none;
position: fixed; 
padding-top: 50px;
left: 0; 
top: 0;
width: 100%;
height: 100%; 
background-color: rgb(0, 0, 0);
background-color: rgba(0, 0, 0, 0.5);
}.modal-content {
position: relative; 
background-color: white;
padding: 20px; 
margin: auto; 
width: 75%; 
-webkit-animation-name: animatetop;
-webkit-animation-duration: 0.4s;
animation-name: animatetop;
animation-duration: 0.4s
}.close-btn {
float: right; 
color: lightgray; 
font-size: 24px; 
font-weight: bold;
}.close-btn:hover {
color: darkgray;
}@-webkit-keyframes animatetop {
from {top:-300px; opacity:0} 
to {top:0; opacity:1}
}@keyframes animatetop {
from {top:-300px; opacity:0}
to {top:0; opacity:1}
}

w powyższych klasach mamy stylizację dla każdego z elementów, które stworzyliśmy w naszym HTML.

sama klasa .modal ma atrybuty, które określają, jak traktuje stronę za samym modalem: szerokość i wysokość w porównaniu do strony za oknem dialogowym, kolor (w tym przykładzie używa półprzezroczystego szarości)i ustawienie widoczności, dzięki czemu możemy przełączać je w naszym Javascript, gdy użytkownik kliknie przycisk.

dla rzeczywistego okna dialogowego mamy również osobne stylizacje w .modal-content: pozycjonowanie go na stylizacji tła, kolor tła dla samego okna dialogowego, wypełnienie, a w tym przykładzie jest animacja, dzięki czemu modal spada z góry strony.

ponadto, wystylizowaliśmy.close-btn klasę, która unosi się”x”w prawo, a z.close-btn:hover, gdy użytkownik najedzie na przycisk Zamknij, kolor zmieni się. Dla jasności, użytkownik może kliknąć poza modalnym, aby zamknąć okno dialogowe tak samo, jak kliknięcie przycisku Zamknij. Utworzymy detektor zdarzeń dla obu opcji w naszym Javascript.

to ledwie zarysowuje powierzchnię CSS, którą możesz zaimplementować samodzielnie. Możesz dostosować powyższy kod do własnych potrzeb.

Javascript

na koniec, musimy napisać trochę Javascript, aby stworzyć funkcjonalność modalu.

let modalBtn = document.getElementById("modal-btn")let modal = document.querySelector(".modal")let closeBtn = document.querySelector(".close-btn")modalBtn.onclick = function(){
modal.style.display = "block"
}closeBtn.onclick = function(){
modal.style.display = "none"
}window.onclick = function(e){
if(e.target == modal){
modal.style.display = "none"
}
}

wybraliśmy kilka obiektów z naszego HTML i przypisaliśmy je do zmiennych: amodal-btn, sammodal Iclose-btn. Następnie utworzyliśmy detektory zdarzeń dlaonclick zdarzeń. Gdy użytkownik kliknie na modal-btn, styl wyświetlania jest ustawiony na "block”, ale gdy kliknie na close-btn lub okno poza modalem (reprezentowane w naszej stylizacji jako półprzezroczysty szary), styl wyświetlania jest następnie ustawiony na "none". To skutecznie ukrywa modalne, dopóki nie klikną ponownie na modal-btn.

ogólnie rzecz biorąc, zabawa z dom z JavaScript była niesamowicie przyjemna i satysfakcjonująca jako początkujący programista. Mam nadzieję, że powyższy kod pomoże Ci samodzielnie zaimplementować Modale i skrzynki wiadomości. Dzięki szybkiemu Googlowaniu możesz również znaleźć inne zasoby, aby dostosować Modale i okna dialogowe do swoich przypadków użycia.

powodzenia i miłego kodowania!