Generarea ferestrelor modale cu JavaScript pur și CSS pentru a gusta
COLABORACIÓN AUTOR INVITADO editor’s Notă: Postarea pe care trebuie să o citiți este lucrarea lui Jorge MG Postat în ESCS ca articol de către autorul invitat. În ea veți găsi calea de a crea maniere cu minimul JavaScript pur (fără a fi nevoie de o bibliotecă) și astfel să puteți aplica stilurile pe care le creați convenabile sau de necesitate. Ca toate articolele din lucrările independente În afara licenței de bere al blogului. Orice aspect legat de acest lucru trebuie să o trateze direct cu autorul său. După un credit nejustificat de către cineva, acest post și scenariul sunt ca
Copyright (c) 2016 Jorge Mg (@itsjorgemg pe Twitter)
JavaScript Funcții IV ID = „001988086C „, confirm() și prompt() sunt foarte utile pentru a afișa sau a cere date în momentul dezvoltării unei pagini web. Desigur, la momentul producției, principalele sale inconveniente este că designul și stilul său depind de browser și nu putem să o modificăm.
Pentru a rezolva acest aspect, vom crea o fereastră modală proprie cu JavaScript cu aceeași performanță ca cele generate de browser, dar cu avantajul de a fi capabili să adauge stiluri prin CSS.
Dacă sunteți în căutarea online, veți găsi cu siguranță mii de realizări ca aceasta, dar Puteți depinde de alte librării sau aveți o multitudine de opțiuni pe care nu le veți folosi niciodată. Deci, obiectivul acestui articol este de a ști cum să configurați propria fereastră modală, pas cu pas, cu codul minim posibil (1 o singură funcție JavaScript) și cu opțiunile de care aveți nevoie.
DIV id = „E538E0A01C „> Dacă vrei ceva de a ieși așa cum vrei, fă-o singur.
apropo, dacă pierdeți orice opțiune sau decideți să vă extindeți Acest demo, vă încurajez să vă spuneți într-un comentariu.
Parametrii și opțiunile ferestrei
înainte de a începe să scrie codul, trebuie să puneți funcțiile pe care le puteți face. În acest mod, pentru a rula funcția care va afișa fereastra va trebui să indice următorii parametri:
- ID: un identificator pentru a putea include o fereastră în interiorul unui alt
- Date: un obiect JSON cu următoarele proprietăți:
- Titlu: Titlul ferestrei care va fi afișat în antetul dvs.
- Lățime: lățimea panoului, în pixeli
- înălțime : Înălțimea panoului, în VH. De exemplu, valoarea 50 va determina înălțimea jumătății modale ca cea a ecranului (vizualizare). Atât lățimea cât și cea mare vor fi controlați de la CSS pentru a preveni ca modalul să fie mai mare decât vasul de vizualizare, indiferent de valoarea indicată în aceste proprietăți
- conținut: mesaj care va afișa fereastra. Poate fi cod HTML. De la CSS putem specifica anumite reguli pentru că numai o singură imagine sau un iFrame este afișată în mod
- Anulează: Aceeași operație ca cea anterioară , dar de tipul „Anulare”. De asemenea, ar trebui să fie o serie de tipul:
ket) modal: opțional, putem afișa un buton de tip „Accept” sau „ok”. Acest parametru trebuie să fie o matrice, al cărui prim produs va fi titlul butonului și al doilea, o funcție care va fi executată prin apăsarea butonului opțional
„D6DB42FA56”> . Acest parametru trebuie să fie o serie de elemente unice: substituentul intrării. Pentru ca această intrare, este necesar să se indice parametrul „OK”, deoarece textul scris va fi primit ca parametru de funcții
Generarea ferestrei și a butoanelor sale
Cu această abordare, putem începe. Modal nu va fi scris în HTML, astfel încât va fi necesar să îl creați prin JavaScript. După deschiderea o dată, modalul va exista deja și, prin urmare, nu va fi necesar să o generați din nou. Eu comentez codul pentru a indica pasul pas cu pas ceea ce facem.
divid id = „9d97c40b5e”>
constă în principal în joc cu document.createElement() și elmt.appendChild()
Avem deja fereastra creată. Acum trebuie să completați toate componentele cu datele corespunzătoare.
DIV id = „D2A5974A76”>
din această parte, trebuie să subliniezi câteva aspecte. Primul este utilizarea variable=valor || ''. Aceasta atribuie valoarea variabilei, dar, în cazul în care valoarea este nevalidă (null sau iv id = „d460854165” ), următoarele vor fi utilizate valoare indicat după bara dublă verticală.În acest caz, acesta va rămâne necompletat, dar ar fi recomandabil să îl schimbați prin titlul paginii dvs., de exemplu.
Al doilea aspect este utilizarea funcției isNaN(). Această funcție returnează true dacă parametrul indicat nu este un număr (deoarece nan înseamnă să nu numiți). Prin urmare, atunci când vă refuzi, știm că starea va funcționa numai atunci când valoarea ridicată și lățimea este validă.
Apoi, vom continua să adăugăm butoanele care vor apărea pe subso:
// si es necesario, creamos el botón "Aceptar"if (ok && ok.length>1) { // la variable "param" se usará para devolver el valor del input // si no hubiera input, el valor será null var param={value:null}; // si es necesario, creamos un párrafo nuevo con su input if (input && input.length>0) { var ph=document.createElement("p"); ph.className="action"; var txt=document.createElement("input"); txt.className="action"; txt.setAttribute("placeholder",input); txt.addEventListener('keydown',function(ev) { // pulsar "enter" es equivalente a pulsar "aceptar" if (ev.keyCode==13 || ev.key=="Enter") { ev.preventDefault(); mod.classList.remove("visible"); ok(param.value); } }); // añadimos el input al párrafo, y éste al contenido ph.appendChild(txt); ct.appendChild(ph); // guardamos la referencia al input param=ct.querySelector("p.action > input.action"); /* ponemos el foco al input, pero esperamos unos milisegundos para que se genere */ setTimeout(function(){ param.focus(); },100); } // creamos el botón OK var bOk=document.createElement("button"); bOk.className="action"; bOk.innerHTML=ok; bOk.addEventListener('click',function(ev) { /* al pulsar en él, se cierra la ventana y se ejecuta la función indicada, devolviendo el valor del input (si existe) o null */ ev.preventDefault(); mod.classList.remove("visible"); ok(param.value); }); // añadimos el botón al footer f.appendChild(bOk);}
Până aici avem deja butonul „Accept” și intrarea, dacă este necesar, creați-le. Pe măsură ce caseta de text nu face parte din nici o formă, apăsarea Enter, nimic nu se va întâmpla. Rezolvăm acest lucru prin adăugarea evenimentului KeyDown, unde verificăm dacă cheia apăsată este intro, iar în acest caz închidem fereastra și rulați funcția corespunzătoare butonului OK, trecând ca parametru valoarea intrării.
, Pentru confortul utilizatorului, am pus focul pe intrare doar deschideți fereastra. Am pus o întârziere de 100 de milisecunde (valoare arbitrară), astfel încât să confere timp pentru ca fereastra să fie creată și deschisă, deoarece dacă facem acest lucru, este încă vizibil pe pagină.
atunci când executați Funcția butonului OK, trecem parametrul param.value. Dacă nu există nicio intrare, această valoare va fi nulă, în timp ce atunci când există, valoarea va corespunde textului introdus. În acest fel, nu trebuie să ne facem griji cu privire la controlul dacă parametrul trebuie sau nu să fie trecut sau nu posibile erori.
Codul pentru a crea butonul Anulare este foarte asemănător cu cel precedent, dar de fapt de a nu utiliza niciun parametru face mai simplu.
// hacemos lo mismo con el botón Cancelar, si existeif (cancel && cancel.length>1) { var bCancel=document.createElement("button"); bCancel.className="action"; bCancel.innerHTML=cancel; bCancel.addEventListener('click',function(ev) { ev.preventDefault(); mod.classList.remove("visible"); cancel(); }); f.appendChild(bCancel);}// si no hay ningún botón, se elimina el footerif (f.innerHTML=='') { p.removeChild(f); mod.classList.add("nofooter");}/* esperamos unos milisegundos para que se genere,y añadimos la clase .visible para mostrarla desde CSS */setTimeout(function(){ mod.classList.add("visible");},50);
În cele din urmă, trebuie să verificați dacă butoanele au fost create. Dacă nu, eliminăm subsolul, deoarece nu va fi folosit și am indicat-o cu clasa „nofooter”, pe care o vom folosi de la CSS. A făcut acest lucru, este lăsat doar să adăugați clasa „vizibilă”, care va arăta fereastra. Motivul pentru care am întârziat 50 de milisecunde este, la fel ca înainte cu intrarea, pentru că ne așteptăm ca fereastra să fi generat.
Demo și considerații finale
Doar dor de codul într-o Funcția, pe care o vom rula când vrem să deschidem fereastra. Acesta este rezultatul și demo-ul opțiunilor disponibile ferestrei modale:
Vedeți fereastra Jmgmodal Pen Kses (@kside) pe CodePen.
În partea CSS acolo Nu este nimic nou pentru a evidenția (dacă poate, sunt permise îmbunătățiri de proiectare …). Practic, cel mai important lucru este clasa .visible, care va controla deschiderea ferestrei. Selectorii selectați pot fi optimizați, dar am preferat să le lăsăm ca aceasta pentru o mai bună înțelegere a elementului la care subliniază.
pe funcționarea ferestrei, am ales întotdeauna prin menținerea închiderii x pentru a fi cel mai puțin intruziv lucru pentru utilizator.