Vodič s uputama za modalne okvire s Javascriptom, HTML-om i CSS-om

Nedavno sam skočio od stvaranja fullstack Ruby aplikacija do rada s Javascriptom. Kao što možda već znate, Javascript omogućuje korisnicima ili klijentima interakciju s web stranicom i dinamički prikaz DOM-a na novom sadržaju na temelju interaktivnosti korisnika. U usporedbi s kodiranjem u Ruby on Rails (u kojem je za svako obnavljanje potrebno osvježavanje na cijeloj stranici), mogućnost ponovnog prikazivanja različitih elemenata stranice na temelju interakcije korisnika s Javascriptom donijela je moje vještine razvoja frontenda iz 1994. i danas. Svojim osnovnim razumijevanjem Javascripta, sada mogu stvoriti interaktivni web element koji me raduje implementirati u svoje projekte: okviri za poruke - ili skočni prozori.

Modalni ili dijaloški okvir je okvir s porukama koji se pojavljuje u pregledniku nakon neke određene interaktivnosti korisnika. Prije nego što uđemo u specifičnosti stvaranja modalnog okvira za vašu web lokaciju s HTML-om, CSS-om i Javascript-om, prvo razmotrimo različite vrste okvira s porukama na koje možete naići.

Vrste kutija za poruke

Upozorenja

Upozorenje je okvir s porukama, obično zaključan u pregledniku, koji zahtijeva odgovor korisnika ili interakciju prije nego što se može odbaciti i nestati sa stranice. Možda želite da klijent potvrdi podatke (Uvjeti korištenja) ili sama stranica potvrđuje ispunjavanje obrasca. Međutim, sve dok se upozorenje ne odbaci, klijent ne može komunicirati s ostatkom stranice.

Kutija poruke upozorenja

Iskočiti

Skočni prozor je ljepljiv (mislite da je "zalijepio" za stranicu, a ne ljepljiv kao bombon) koji se pojavljuje u pregledniku i ne zahtijeva neposrednu interakciju ili pažnju. Ako korisnik želi da nestanu, tada će se morati zatvoriti ili komunicirati s skočnim prozorom, ali interaktivnost ostatka stranice je i dalje funkcionalna. Obavijesti su primjer skočnog prozora.

Popup okvir za poruke

Obavijest o growl / Bljeskalica

Obavijest o urlanju je skočna popust koja se odbacuje nakon pridruženog razdoblja. Oni se ponekad nazivaju i obavijestima o bljesku. Korisnik može komunicirati s piskanjem glasom - možda rano odbaciti okvir za poruke ili kliknuti na gumb unutar obavijesti - ili može odlučiti zanemariti i ono će nestati nakon što istekne tajmer. Kao i skočni prozor, obavijest o piskanju omogućuje klijentu da nastavi interakciju s ostatkom stranice. Primjer za to je obavijest putem e-pošte ili na društvenim mrežama.

Obavijest o growl-u

Okvir za pregled / Kazalište

Lightbox ili kazalište je okvir s porukama koji obično povećava sadržaj koji je već bio dostupan u pregledniku kako bi se korisnik usredotočio na njega. Uobičajeni slučaj je slika ili niz slika prikazanih u galeriji. Kada je lightbox ili kazalište zaposleno s više komada sadržaja, smatra se "zaključanim" kada korisnik može kretati kroz pridruženi sadržaj unutar samog okvira okvira, umjesto da se vrati na izvornu stranicu i nakon toga klikne na sljedeću sliku u nizu povećati.

Okvir za pregled / Kazalište

Skočne prozore / oblačića

Jedan od manjih okvira s porukama, popover ili hovercard pojavljuje se na zaslonu samo kada korisnik pređe mišem preko odabranog područja. Ovi okviri za poruke mogu sadržavati upute ili objašnjenja u vezi s gumbom ili spremnikom nad kojim korisnik trenutno lebdi iznad miša; mogu sadržavati i pregled dostupnih informacija ako korisnik klikne na vezu.

Skočne prozore / oblačića

Modalni / dijaloški okvir

Konačno, modalni ili dijaloški okvir je okvir s porukama koji omogućava daljnju interaktivnost stranice bez odlaska od trenutnog sadržaja u pregledniku. Modalni okvir nije zaključan na zaslonu (tj. Klijent se može kretati dalje od njega bez potrebne interakcije), iako je to obično fokus korisnika (na temelju vašeg oblikovanja okvira). U većini slučajeva, ako korisnik želi odbaciti modal, može jednostavno zatvoriti okvir isporučenim gumbom ili kliknuti izvan modula. Primjer modaliteta je kada korisnik treba ispuniti obrazac ili pružiti određene informacije za upit za pretraživanje, ali ne želite da se oni prebace na drugu stranicu.

Modalni / dijaloški okvir

Provedba modaliteta

Da biste stvorili i implementirali modalitet na svoju stranicu, tri su koraka koja morate ispuniti za funkcionalnost:

  1. HTML: oznaka za stvaranje modalnog elementa
  2. CSS: styling za određivanje kako vaš modal izgleda i izgleda na stranici
  3. Javascript: postavljanje slušatelja događaja tako da se modal pojavljuje / nestaje, ovisno o interaktivnosti vašeg korisnika

HTML

Za najjednostavnije modele potreban nam je gumb (ili bilo koji element stranice koji vam se više sviđa) na koji korisnik može kliknuti kako bi aktivirao modal, stvarni modal, i vjerojatno ćete htjeti implementirati gumb za zatvaranje u modalu.

U gore navedenom možete vidjeti da imamo gumb koji će se pojaviti unutar našeg HTML-a, kao i modal, s tri CSS klase: modal, modal-btn i close-btn. Svaka od njih bit će uključena u CSS u nastavku. Prvi div je nadređeni spremnik koji sadrži cijeli modal s klasom modaliteta. Interno imamo div koji sadrži sadržaj za sam modal: gumb za zatvaranje modalnog raspona i tekst unutar ptaga.

Kao brzu stranu, u svoj modalitet možete implementirati i zaglavlja i podnožja tako što ćete jednostavno stvoriti više div-ova unutar HTML-a i daljnjih CSS klasa. Na primjer:

CSS

Za stil svakog elementa u našem jednostavnom modalnom HTML-u moramo stvoriti pridružene CSS klase: .modal, .modal-content i .close-btn. Nadalje, ispod možete vidjeti da je uključen i CSS za stvaranje animacije za modal.

.modal {
  prikaz: nijedan;
  položaj: fiksiran;
  padding-top: 50px;
  lijevo: 0;
  vrh: 0;
  širina: 100%;
  visina: 100%;
  pozadinska boja: rgb (0, 0, 0);
  boja pozadine: rgba (0, 0, 0, 0,5);
}
.modal-content {
  položaj: relativan;
  boja pozadine: bijela;
  padding: 20px;
  marža: auto;
  širina: 75%;
  -webkit-animacija-ime: animatetop;
  -webkit-animacija-trajanje: 0,4s;
  animacija-ime: animatetop;
  trajanje animacije: 0,4s
}
.close-btn {
  plutati: desno;
  boja: svijetlosiva;
  veličina fonta: 24px;
  težina slova: podebljano;
}
.close-btn: lebdi {
  boja: darkgray;
}
@ -webkit-keyframes animatetop {
  od {top: -300px; Neprozirnost: 0}
  do {top: 0; Neprozirnost: 1}
}
@keyframes animatetop {
  od {top: -300px; Neprozirnost: 0}
  do {top: 0; Neprozirnost: 1}
}

U gornjim klasama imamo styling za svaki od elemenata koje smo stvorili u našem HTML-u.

Sama klasa .modal ima atribute koji određuju kako postupa sa stranicom koja se nalazi iza samog modaliteta: širina i visina u odnosu na stranicu iza dijaloškog okvira, boja (ovaj primjer koristi poluprozirnu sivu) i postavku vidljivosti tako da ga možemo prebaciti u naš Javascript kada korisnik klikne gumb.

Za stvarni dijaloški okvir također imamo zaseban stil u .modalnom sadržaju: pozicioniranje ga na pozadinski stil, boju pozadine za sam dijaloški okvir, presvlake, a u ovom primjeru uključena je animacija tako da se modal spušta s vrh stranice.

Nadalje smo oblikovali klasu .close-btn koja pluta slovom 'x' udesno, a s .close-btn: lebdite, kad korisnik pređe preko gumba za zatvaranje, boja će se promijeniti. Radi jasnoće, korisnik može kliknuti izvan modula kako bi zatvorio dijaloški okvir isto kao što je kliknuo na gumb za zatvaranje. Napravit ćemo slušatelja događaja za obje mogućnosti u našem Javascriptu.

To jedva ogrebotine po površini CSS-a koje biste mogli sami implementirati. Slobodno prilagodite gornji kôd tako da najbolje odgovara vašim potrebama.

Javascript

I na kraju, moramo napisati neki Javascript kako bismo stvorili funkcionalnost modala.

neka modalBtn = document.getElementById ("modal-btn")
neka modal = document.querySelector (". modal")
neka closeBtn = document.querySelector (". close-btn")
modalBtn.onclick = funkcija () {
  modal.style.display = "blok"
}
closeBtn.onclick = funkcija () {
  modal.style.display = "nijedan"
}
window.onclick = funkcija (e) {
  ako je (npr. target == modal) {
    modal.style.display = "nijedan"
  }
}

Odabrali smo nekoliko objekata iz našeg HTML-a i dodijelili ih varijablama: modal-btn, sam modal i close-btn. Zatim stvaramo slušatelje događaja za događaje onclick. Kada korisnik klikne na modal-btn, stil prikaza postavljen je na "blokadu", ali kad klikne na close-btn ili prozor izvan modalnog sustava (koji je u našem stylingu predstavljen kao poluprozirna siva), Stil zaslona se nakon toga postavlja na "none". To učinkovito skriva modal dok ponovo ne kliknu na modal-btn.

Modalni ispis na ekranu

Sve u svemu, igranje s DOM-om uz Javascript bilo je nevjerojatno zabavno i korisno kao početni koder. Nadamo se da će vam gornji kod pomoći i sami implementirati modalitete i okvire za poruke. Pomoću brzog googlea možete pronaći i dodatne resurse za prilagodbu modaliteta i dijaloških okvira za svoje slučajeve upotrebe.

Sretno vani i sretno kodiranje!

Resursi

Razmjena stokova: Modal, Popups, Povers i Lightbox

w3schools: Kako - CSS / JS Modal

Sabe: Kako stvoriti modalni okvir za skočni prozor s CSS-om i JavaScript-om