în acest tutorial Vom învăța cum să creăm maniere pop-up cu JavaScript (ferestre de dialog) fără a utiliza un cadru de lucru, cum ar fi bootstrap sau a Biblioteca terță parte. Vom crea totul de la zero, oferind un control complet asupra modului în care funcționează și cum arată.
Aici este spectacolul pe care îl vom crea:
1. Începeți cu marcarea paginii
va crea mai întâi un modal. Pentru a face acest lucru, vom adăuga clasa .modal și un ID unic la un container. Apoi vom specifica dialogul prin setarea unui element ca element secundar direct al .modal. Dialogul va conține conținutul modalului. Poate fi orice tip de conținut, cum ar fi textul, imaginile, casetele de lumină, notificările / alertele utilizatorilor etc.
„O fereastră de dialog (sau modal) este un element mic Interfața utilizator (UI) care apare în prim-plan pe un site web, este de obicei activată ca un avertisment, astfel încât utilizatorul să facă ceva „- Adi Prdila
iv id =” A7cb84b0ae „
la Deschideți un modal, vom avea nevoie de orice element cu atributul data-open (în mod normal button). Valoarea acestui atribut trebuie să fie ID-ul modalului dorit.
Implicit, un modal se va închide dacă vom face clic pe limitele sau când apăsăm tasta Esc Dar o putem închide, de asemenea, dacă facem clic pe orice element cu atributul data-close (de obicei button).
La început, modalul va apărea / va dispărea cu un efect de decolorare. Dar avem capacitatea de a regla efectul de animație de dialog utilizând atributul data-animation. valoarea acestui atribut care trebuie adăugat la .modal poate fi oricare dintre următoarele valori:
- iv id = „bcd16c7eac”
zoomInOut mixInAnimations
Vom vedea mai îndeaproape aceste valori într-o secțiune următoare.
Pentru moment, ne vom familiariza cu marcajul care este necesar Pentru a reprezenta un mod modal:
<button type="button" class="open-modal" data-open="modal1">...</button><div class="modal"> <div class="modal-dialog"> <header class="modal-header"> ... <button class="close-modal" aria-label="close modal" data-close>✕</button> </header> <section class="modal-content">...</section> <footer class="modal-footer">...</footer> </div></div>
2. Definește câteva stiluri de bază
cu marcajul pregătit, vom configura unele Variabile CSS și vom reporni stilurile:
:root { --lightgray: #efefef; --blue: steelblue; --white: #fff; --black: rgba(0, 0, 0, 0.8); --bounceEasing: cubic-bezier(0.51, 0.92, 0.24, 1.15);}* { padding: 0; margin: 0;}button { cursor: pointer; background: transparent; border: none; outline: none; font-size: inherit;}
După aceea, vom concentra orizontal și conținut vertical d E pagina. În plus, vă vom oferi niște stiluri la butonul responsabil pentru deschiderea modalului:
/*CUSTOM VARIABLES HERE*/body { display: flex; align-items: center; justify-content: center; height: 100vh; font: 16px/1.5 sans-serif;}.btn-group { text-align: center;}.open-modal { font-weight: bold; background: var(--blue); color: var(--white); padding: .75rem 1.75rem; margin-bottom: 1rem; border-radius: 5px;}
În acest moment, ne vom concentra atenția asupra stilurilor lui Modal.
Fiecare modal va avea următoarele caracteristici:
- va fi ecran complet cu o poziție fixă. Adică, va fi văzută ca o suprapunere care acoperă toată lățimea și înălțimea ferestrei.
- va avea o culoare fundal întunecată.
- va fi ascuns în mod implicit.
- Dialogul va fi centrat pe orizontală și vertical.
/*CUSTOM VARIABLES HERE*/.modal { position: fixed; top: 0; left: 0; right: 0; bottom: 0; display: flex; align-items: center; justify-content: center; padding: 1rem; background: var(--black); cursor: pointer; visibility: hidden; opacity: 0; transition: all 0.35s ease-in;}
Dialogul va avea o lățime maximă și o înălțime. Înălțimea sa va fi de 80% din înălțimea ferestrei. În cazurile în care înălțimea depășește valoarea respectivă, va apărea o bară de derulare verticală:
/*CUSTOM VARIABLES HERE*/.modal-dialog { position: relative; max-width: 800px; max-height: 80vh; border-radius: 5px; background: var(--white); overflow: auto; cursor: default;}
În cele din urmă, vom defini câteva stiluri simple pentru fiecare dintre secțiunile de conținut
/*CUSTOM VARIABLES HERE*/.modal-dialog > * { padding: 1rem;}.modal-header,.modal-footer { background: var(--lightgray);}.modal-header { display: flex; align-items: center; justify-content: space-between;}.modal-header .modal-close { font-size: 1.5rem;}.modal p + p { margin-top: 1rem;}
3. Alternativ Modal
O pagină poate avea mai mult modal . Dar, după cum sa menționat mai sus, toate manierele vor fi ascunse la început.
Deschide modal
În mod similar, o pagină poate avea mai mult de un activator deschis (elemente cu atributul data-open). De fiecare dată când faceți clic pe un activator, modalul asociat trebuie să fie vizibil cu o animație care apare treptat (se estompează). Amintiți-vă că valoarea atributului data-open trebuie să se potrivească cu ID-ul unui modal.
aici este scriptul care dezvăluie un mod modal:
const openEls = document.querySelectorAll("");const isVisible = "is-visible";for(const el of openEls) { el.addEventListener("click", function() { const modalId = this.dataset.open; document.getElementById(modalId).classList.add(isVisible); });}
și clase relevante CSS:
ivid id = „806C49C11C”
Închidere modal
cu implementarea noastră Odată ce un modal poate apărea numai la un moment dat (acest cod nu acceptă manierele imbricate). Așa cum am menționat în secțiunea anterioară de apelare, există trei metode disponibile pentru ao ascunde cu un efect de decolorare (Fade-out).
recaptarea.
Primul, făcând clic pe elementul personalizat care este situat în interiorul modalului:
const closeEls = document.querySelectorAll("");const isVisible = "is-visible";for (const el of closeEls) { el.addEventListener("click", function() { this.parentElement.parentElement.parentElement.classList.remove(isVisible); });}
În al doilea rând, făcând clic pe oriunde în afara modalului:
const isVisible = "is-visible";document.addEventListener("click", e => { if (e.target == document.querySelector(".modal.is-visible")) { document.querySelector(".modal.is-visible").classList.remove(isVisible); }});
În acest caz, modal (suprapunere) se comportă ca o închidere uriașă buton. Din acest motiv, i-am dat iv id = „50bb208896”
.
În cele din urmă, apăsând tasta Esc:
const isVisible = "is-visible";document.addEventListener("keyup", e => { if (e.key == "Escape" && document.querySelector(".modal.is-visible")) { document.querySelector(".modal.is-visible").classList.remove(isVisible); }});
este un moment bun pentru a vedea ce am creat până acum:
Modal arată foarte bine! Rețineți că de fiecare dată când facem clic pe un activator deschis, este încărcat modal corespunzător.
Să luăm un alt pas și să examinăm câteva idei pentru a vă încuraja dialogul.
4. Adăugați animații la
Dialogul După cum am indicat înainte, comportamentul implicit al modalului este aspectul treptat (dispariția) și decolorarea treptată (decolorarea). Dar există opțiunea de a ajusta efectul de animație al ferestrei pop-up.
Am creat deja suficiente efecte de animație pe care le puteți utiliza ca o alternativă la efectul de decolorare. Pentru a face acest lucru, pur și simplu trebuie să treceți atributul la .modal.
De exemplu, dacă doriți Dialogul apare cu o animație glisantă de la stânga la dreapta, veți avea nevoie de efectul slideInOutLeft.
În spatele scenei, există două reguli care realizează această animație:
/*CUSTOM VARIABLES HERE*/ .modal-dialog { opacity: 0; transform: translateX(-100%); transition: all 0.5s var(--bounceEasing);}.is-visible .modal-dialog { opacity: 1; transform: none; transition-delay: 0.2s;}
Verificați modalul cu acest tip de animație aici:
Puteți verifica restul animațiilor, uitându-se la fila CSS a Proiectul de demonstrație final. În funcție de complexitatea animațiilor, am folosit tranziții CSS sau animații pentru a le crea.
Am folosit și funcția cubic-bezier() pentru a ajusta funcția de timp a tuturor tranzițiilor. Dacă nu vă place efectul de revenire pe care îl produce, nu ezitați să îl schimbați la ceva mai blând prin variabila --bounceEasing CSS. Uită-te la demonstrația finală cu toate efectele Animație aici:
Concluzie
Asta-i tot, prieteni! În timpul acestui tutorial am învățat să creăm dialoguri personalizate de viață fără depinde de orice cadru front-end.
Sper că v-ați bucurat de rezultatul final și că creația dvs. v-a ajutat să vă actualizați abilitățile din față. Sfârșit
/ P>
mai multe citiri pe ferestre pop-up
-
wordpress pluginurimai mult de 20 de ani din cele mai bune pluginuri WordPress pentru ferestrele emergente și opt-inNona Blackman -
designul UICel mai bun mod de a utiliza ferestrele de dialog (modals) în web designAdi Purtila - iv id = „8d9769C73c”
WordPressCum se creează ferestre pop-up spectaculoase în WordPress cu elementelor proAdi purpardila