Generazione di finestre modali modali con JavaScript puro e il suo CSS da assaggiare
COLABORACIÓN AUTOR INVITADO Nota dell’editor: il post che devi leggere è il lavoro di Jorge MG pubblicato in ESCS come articolo del Autore invitato. In esso troverete il modo di creare maniere con il minimo di puro JavaScript (senza la necessità di una biblioteca) e quindi essere in grado di applicare gli stili che crei o necessari.
come tutti gli articoli di resti autonomi al di fuori della licenza di beerware del blog. Qualsiasi aspetto relativo a questo deve trattarlo direttamente con il suo autore.
Dopo un indebito stanziamento da parte di qualcuno, questo post e lo script sono come i copyright (c) 2016 Jorge MG (@itsjorgeemg su Twitter)
Funzioni JavaScript alert(), confirm() e prompt() sono molto utili da mostrare o chiedere ai dati al momento dello sviluppo di una pagina Web. Naturalmente, al momento della produzione, il suo principale inconveniente è che il suo design e lo stile dipendono dal browser, e non possiamo modificarlo.
Per risolvere questo aspetto, creeremo la nostra finestra modale con JavaScript con le stesse prestazioni di quelle generate dal browser, ma con il vantaggio di essere in grado di aggiungere stili tramite CSS.
Se stai cercando online, troverai sicuramente migliaia di realizzazioni come questa, ma Puoi dipendere da altre librerie o avere una moltitudine di opzioni che non userai mai. Quindi l’obiettivo di questo articolo è sapere come configurare la propria finestra Modal, passo dopo passo, con il codice minimo possibile (1 funzione singola JavaScript) e con le opzioni necessarie.
Se vuoi che qualcosa venga fuori come vuoi, fallo da solo.
A proposito, se ti manca qualsiasi opzione o decidi di espandersi Questa demo, ti incoraggio a dirti in un commento.
Parametri e opzioni della finestra
Prima di iniziare a scrivere il codice, è necessario posare le funzioni che puoi fare. In questo modo, per eseguire la funzione che visualizzerà la finestra dovrà indicare i seguenti parametri:
- ID: un identificatore per essere in grado di includere una finestra all’interno di un altro
- Dati: un oggetto JSON con le seguenti proprietà:
- Titolo: Titolo della finestra che verrà visualizzato nell’intestazione
- larghezza: larghezza del pannello, in pixel
- altezza : Altezza del pannello, in vh. Ad esempio, il valore 50 causerà l’altezza della metà modale come quella sullo schermo (Viewport). Sia la larghezza che l’alta saranno controllati da CSS per impedire che il Modal sia più grande della vista, qualunque sia il valore indicato in queste proprietà
- contenuto: messaggio che mostrerà la finestra. Può essere codice HTML. Da CSS possiamo specificare alcune regole per quando viene visualizzata solo un’immagine o un iframe in
- Annulla: opzionale, con la stessa operazione del precedente , ma del tipo “Annulla”. Dovrebbe anche essere una serie del tipo:
- ingresso: opzionale, per visualizzare una casella di testo, allo stesso modo della funzione
prompt(). Questo parametro deve essere una serie di un singolo elemento: il segnaposto dell’ingresso. Per questo input, è necessario indicare il parametro “OK”, poiché il testo scritto verrà ricevuto come parametro funzione
ket) Modal: facoltativamente, possiamo mostrare un pulsante del tipo “Accetta” o “OK”. Questo parametro deve essere un array, il cui primo elemento sarà il titolo del pulsante e il secondo, una funzione che verrà eseguita premendo il pulsante
generando la finestra e i pulsanti
Con questo approccio, possiamo iniziare. Il Modal non sarà scritto nell’HTML, quindi prima di tutto sarà necessario crearlo tramite JavaScript. Dopo l’apertura una volta, il Modal esisterà già e quindi, non sarà necessario generarlo di nuovo. Commendo il codice per indicare passo dopo passo ciò che stiamo facendo.
data=data || {}; // si no existe data, creamos un objeto vacío para evitar posteriores erroresid="modal-"+id; // añadimos "modal-" a la id para evitar conflictos con otros elementosif (document.getElementById(id)==null) { // solo hace falta crearla si no existe var d=document.createElement("div"); d.className="jmgmodal"; // clase para estilizarla vía CSS d.id=id; // creamos el panel interior var p=document.createElement("div"); p.className="panel"; // creamos los componentes de la cabecera: título y botón de cerrar var t=document.createElement("div"); t.className="title"; var cl=document.createElement("div"); cl.className="close"; cl.innerHTML='×'; // cerramos y vaciamos la modal al pulsar el botón X cl.addEventListener('click',function(ev) { ev.preventDefault(); var dTop=this.parentNode.parentNode; dTop.classList.remove("visible"); dTop.querySelector(".panel .content").innerHTML=''; }); // creamos la caja donde se mostrará el contenido var ct=document.createElement("div"); ct.className="content"; // también añadimos un pie, para añadir los posibles botones var f=document.createElement("div"); f.className="footer"; /* finalmente, añadimos "t", "cl", "ct" y "f" (título, botón cerrar, div contenido y div footer) a "p" (panel interior), éste lo añadimos a "d" (div principal, para oscurecer el fondo), y "d" lo añadimos al body de la página */ p.appendChild(t);p.appendChild(cl);p.appendChild(ct);p.appendChild(f); d.appendChild(p); document.body.appendChild(d);}
Fondamentalmente consiste nel giocare con document.createElement() e elmt.appendChild() insieme agli attributi di ciascun elemento per ottenere la struttura desiderata.
Abbiamo già la finestra creata. Ora devi riempire tutti i tuoi componenti con i dati corrispondenti.
// guardamos cada componente en una variablevar mod=document.getElementById(id),p=mod.querySelector(".panel"),t=mod.querySelector(".panel .title"),ct=mod.querySelector(".panel .content"),f=mod.querySelector(".panel .footer");if (f==null) { // puede ocurrir que el footer no exista, así que lo volvemos a crear mod.classList.remove("nofooter"); var f=document.createElement("div"); f.className="footer"; p.appendChild(f);}// rellenamos los datost.innerHTML=data.title || '';ct.innerHTML=data.content || '';f.innerHTML='';// comprobamos que el número es válido antes de añadirloif (!isNaN(data.width)) p.style.maxWidth=data.width+'px';if (!isNaN(data.height)) p.style.maxHeight=data.height+'vh';
di questa parte, devi evidenziare un paio di aspetti. Il primo è l’uso di variable=valor || ''. Questo assegna il valore alla variabile, ma, nel caso in cui il valore non sia valido (null o undefined), verrà utilizzato il valore indicato dopo la doppia barra verticale.In questo caso, rimarrà vuoto, ma sarebbe consigliabile cambiarlo dal titolo della tua pagina, ad esempio.
il secondo aspetto è l’uso della funzione isNaN(). Questa funzione restituisce true se il parametro indicato non è un numero (dal momento che Nan significa non numero). Pertanto, quando ne neghi, sappiamo che la condizione verrà eseguita solo quando il valore dell’alto e la larghezza è valida.
Avanti, continuiamo ad aggiungere i pulsanti che appariranno sul piè di pagina:
// 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);}
Fino a qui Abbiamo già il pulsante “Accetta” e l’ingresso, se necessario crearli. Poiché la casella di testo non fa parte di alcuna forma, premendo Invio, non accadrà nulla. Soldiamo questo aggiungendo l’evento Keydown, in cui controlliamo se il tasto premuto è l’introduzione, e in tal caso chiudiamo la finestra ed eseguiremo la funzione corrispondente al pulsante OK, passando come parametro il valore dell’input.
, Per il comfort dell’utente, mettiamo la messa a fuoco sull’ingresso appena apri la finestra. Mettiamo un ritardo di 100 millisecondi (valore totalmente arbitrario) in modo che dia il tempo per la finestra da creare e aprire, poiché se lo facciamo, è ancora visibile sulla pagina.
Durante l’esecuzione del Funzione del pulsante OK, passiamo il parametro param.value. Se non c’è input, questo valore sarà nullo, mentre quando c’è, il valore corrisponderà al testo inserito. In questo modo, non dobbiamo preoccuparci di controllare se il parametro deve essere superato ed evitare possibili errori.
Il codice per creare il pulsante Annulla è molto simile a quello precedente, ma il fatto di non usare qualsiasi parametro lo rende più semplice.
// 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);
Infine, è necessario verificare se i pulsanti sono stati creati. In caso contrario, eliminiamo il piè di pagina, poiché non verrà utilizzato, e l’abbiamo indicato con la classe “Nofooter”, che useremo da CSS. Fatto questo, è solo lasciato aggiungere la classe “visibile”, che mostrerà la finestra. Il motivo per cui ritardiamo 50 millisecondi è, proprio come prima con l’input, perché ci aspettiamo che la finestra abbia generato.
demo e considerazioni finali
Solo mi manchi il codice in a funzione, che funzioneremo quando vogliamo aprire la finestra. Questo è il risultato e la demo delle opzioni disponibili per la finestra Modal:
Vedi la finestra della penna jmgmodal di kses (@kside) su codepen.
Nella parte del CSS lì Non è nulla di nuovo da evidenziare (se forse, i miglioramenti del design sono ammessi …). Fondamentalmente, la cosa più importante è la classe .visible, che controllerà l’apertura della finestra. I selettori selezionati possono essere ottimizzati, ma ho preferito lasciarli in questo modo per una migliore comprensione dell’elemento a cui puntano.
Sul funzionamento della finestra, ho scelto mantenendo sempre la chiusura X pulsante per essere la cosa meno intrusiva per l’utente.