Xeración de fiestras modais con JavaScript puro e o seu CSS a gusto
COLABORACIÓN AUTOR INVITADO Nota do editor: A publicación que ten que ler é o traballo de Jorge MG Publicado en CESS como artigo do Autor invitado. Nela atoparás o xeito de crear modales co mínimo de JavaScript puro (sen necesidade dunha biblioteca) e así poder aplicar os estilos que creas conveniente ou necesario.
Como todos os artigos de autónomos permanecen fóra da licenza de cervexa do blog. Calquera aspecto relacionado con isto ten que tratalo directamente co seu autor.
Despois dunha apropiación indebida por alguén, esta publicación e o guión son como
Copyright (c) 2016 Jorge Mg (@itsjorgemg en Twitter)
funcións de JavaScript alert(), e prompt() son moi útiles para mostrar ou facer datos no momento do desenvolvemento dunha páxina web. Por suposto, no momento da produción, o seu principal inconveniente é que o seu deseño e estilo depende do navegador e non podemos modificalo.
Para resolver este aspecto, crearemos a nosa propia fiestra modal con JavaScript co mesmo rendemento que os xerados polo navegador, pero coa vantaxe de poder engadir estilos a través de CSS.
Se está a buscar en liña, seguramente atopará miles de realizacións como esta, pero Pode depender doutras librerías ou ter unha multitude de opcións que nunca usará. Polo tanto, o obxectivo deste artigo é saber como configurar a súa propia fiestra modal, paso a paso, co código mínimo posible (1 función de JavaScript único) e coas opcións que precisa.
Se queres que saia algo que queiras, faino vostede mesmo.
Por certo, se perde calquera opción ou decide expandirse Esta demostración, animo a que che diga nun comentario.
Parámetros e opcións da xanela
Antes de comezar a escribir o código, ten que supoñer as funcións que pode facer. Deste xeito, para executar a función que mostrará a xanela terá que indicar os seguintes parámetros:
- ID: un identificador para poder incluír unha xanela dentro doutro
- Datos: un obxecto json coas seguintes propiedades:
- Título: Título da xanela que se mostrará no seu cabeceira
- Ancho: ancho do panel, en píxeles
- Altura : Altura do panel, en VH. Por exemplo, o valor 50 causará a altura da metade modal como a da pantalla (Viewport). Tanto o ancho como o alto serán controlados desde CSS para evitar que o modal sexa maior que o punto de vista, calquera que sexa o valor indicado nestas propiedades
- contido: mensaxe que mostrará a xanela. Pode ser código HTML. Desde CSS podemos especificar algunhas regras para cando só unha imaxe ou un iframe amósase no
- Cancelar: botón opcional, coa mesma operación que a anterior , pero do tipo “Cancelar”. Tamén debe ser unha matriz do tipo:
- Entrada: opcional, para mostrar un cadro de texto, do mesmo xeito que a función
prompt(). Este parámetro debe ser unha matriz dun único elemento: o marcador de posición da entrada. Para que esta entrada, é necesario indicar o parámetro “Aceptar”, xa que o texto escrito será recibido como parámetro de función
ket) modal: opcionalmente, podemos mostrar un botón do tipo “Aceptar” ou “OK”. Este parámetro debe ser unha matriz, cuxo primeiro elemento será o título do botón e a segunda, unha función que se executará premendo o botón
xerando a xanela e os seus botóns
Con este enfoque, podemos comezar. O MODAL non se escribirá no HTML, polo que primeiro será necesario crealo a través de JavaScript. Despois de abrir unha vez, o modal xa existirá e, polo tanto, non será necesario xerar de novo. Eu comente o código para indicar paso a paso o que estamos 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);}
basicamente consiste en xogar con document.createElement() e elmt.appendChild() xunto cos atributos de cada elemento para obter a estrutura desexada.
Xa temos a xanela creada. Agora ten que cubrir todos os seus compoñentes cos datos correspondentes.
// 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';
desta parte, ten que destacar un par de aspectos. O primeiro é o uso de variable=valor || ''. Isto atribúe o valor á variable, pero, no caso de que o valor non sexa válido (null ou undefined), usarase o seguinte valor indicado despois da barra vertical dobre.Neste caso, permanecerá en branco, pero sería recomendable cambialo polo título da túa páxina, por exemplo.
O segundo aspecto é o uso da función isNaN(). Esta función devolve true se o parámetro indicado non é un número (xa que Nan significa non o número). Polo tanto, cando o negas, sabemos que a condición só funcionará cando o valor do alto eo ancho é válido.
A continuación, seguimos engadindo os botóns que aparecerán no pé de páxina:
// 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);}
ata aquí xa temos o botón “Aceptar” e a entrada, se é necesario creala. Como a caixa de texto non forma parte de ningunha forma, premendo Enter, non vai ocorrer nada. Resolvemos isto engadindo o evento de KeyDown, onde comprobamos se a tecla presionada é a introdución e, nese caso, pechamos a xanela e executamos a función correspondente ao botón Aceptar, pasando como parámetro o valor da entrada.
, para o confort do usuario, poñemos o foco na entrada só abre a xanela. Poñemos un atraso de 100 milisegundos (valor totalmente arbitrario) para que teña tempo para que a xanela sexa creada e aberta, xa que se o facemos, aínda é visible na páxina.
ao executar o Función de botón Aceptar, pasamos o parámetro param.value. Se non hai ningunha entrada, este valor será nulo, mentres que cando hai, o valor corresponderá ao texto introducido. Deste xeito, non temos que preocuparnos de controlar se o parámetro debe ser aprobado ou non e non evitar posibles erros.
O código para crear o botón Cancelar é moi similar ao anterior, pero o feito de non usar ningún parámetro fai que sexa máis sinxelo.
// 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);
Finalmente, ten que comprobar se se crearon os botóns. Se non, eliminamos o pé de páxina, xa que non se vai usar e indicámolo coa clase “nofooter”, que imos usar desde CSS. Feito isto, só queda para engadir a clase “visible”, que mostrará a xanela. A razón pola que atrasamos 50 milisegundos é, así como antes coa entrada, porque esperamos que a xanela teña xerado.
Demostración e consideracións finais
Só tes que perderme o código nun Función, que correremos cando queremos abrir a xanela. Este é o resultado e demostración das opcións dispoñibles para a xanela Modal:
Vexa a xanela da pluma jmgmodal de KSES (@Side) en Codepen.
Nas partes do CSS alí Non é nada novo para destacar (se quizais, as melloras de deseño están permitidas …). Basicamente, o máis importante é a clase , que controlará a apertura da xanela. Os selectores seleccionados pódense optimizar, pero preferín deixarlles así como unha mellor comprensión do elemento ao que apuntan.
No funcionamento da xanela, escollín sempre manter o pecado X botón para ser a cousa menos intrusiva para o usuario.