gerando janelas modais com javascript puro e seus css para sabor
COLABORACIÓN AUTOR INVITADO Editor Nota: O post que você tem que ler é o trabalho de Jorge Mg postada em EscSs como um artigo pelo autor convidado. Nele, você encontrará a maneira de criar maneiras com o mínimo de javascript puro (sem a necessidade de uma biblioteca) e, portanto, ser capaz de aplicar os estilos que você cria conveniente ou necessidade. Como todos os artigos de trabalho autônomo permanecem fora da licença do beerware do blog. Qualquer aspecto relacionado a isso tem que tratá-lo diretamente com seu autor.
Depois de uma apropriação indevida por alguém, este post e o script são como
Copyright (C) 2016 Jorge MG (@itsjorgemg no Twitter)
javascript funções alert(), confirm() e prompt() são muito úteis para mostrar ou pedir dados no momento do desenvolvimento de uma página da página. Claro, no momento da produção, seu principal inconveniente é que seu design e estilo dependem do navegador, e não podemos modificá-lo.
Para resolver este aspecto, vamos criar nossa própria janela modal com Javascript com o mesmo desempenho que os gerados pelo navegador, mas com a vantagem de ser capaz de adicionar estilos via CSS.
Se você está procurando on-line, você certamente encontrará milhares de realizações como essa, mas Você pode depender de outras livrarias ou ter uma infinidade de opções que você nunca usará. Assim, o objetivo deste artigo é saber como configurar sua própria janela modal, passo a passo, com o código mínimo possível (1 função de javascript único) e com as opções necessárias.
Se você quiser que algo saia como quiser, faça você mesmo.
A propósito, se você perder alguma opção ou decidir expandir Esta demonstração, eu encorajo você a lhe dizer em um comentário.
Parâmetros e opções da janela
Antes de começar a escrever o código, você tem que representar as funções que você pode fazer. Desta forma, para executar a função que exibirá a janela terá que indicar os seguintes parâmetros:
- ID: um identificador para poder incluir uma janela dentro de outro
- Dados: um objeto JSON com as seguintes propriedades:
- título: Título da janela que será exibido no seu cabeçalho
- largura: painel largura, em pixels
- altura : Altura do painel, em vh. Por exemplo, o valor 50 causará a altura da metade modal como a da tela (viewport). Tanto a largura quanto a alta serão controladas a partir do CSS para evitar que o modal seja maior que a viewport, seja qual for o valor indicado nessas propriedades
- conteúdo: mensagem que mostrará a janela. Pode ser código HTML. A partir do CSS, podemos especificar algumas regras para quando apenas uma imagem ou iframe é exibida no modal
- Cancel: opcional, com a mesma operação que a anterior , mas do tipo “cancelar”. Também deve ser uma matriz do tipo:
- entrada: opcional, para exibir uma caixa de texto, da mesma forma que a função
prompt(). Este parâmetro deve ser uma matriz de um único elemento: o espaço reservado da entrada. Para que esta entrada, é necessário indicar o parâmetro “OK”, uma vez que o texto escrito será recebido como parâmetro de função
ket): opcionalmente, podemos mostrar um botão do tipo “Aceitar” ou “ok”. Este parâmetro deve ser uma matriz, cujo primeiro item será o título do botão e o segundo, uma função que será executada pressionando o botão
gerando a janela e seus botões
Com esta abordagem, podemos começar. O modal não será escrito no HTML, então antes de tudo será necessário para criá-lo via JavaScript. Depois de abrir uma vez, o modal já existirá e, portanto, não será necessário gerá-lo novamente. Eu comento o código para indicar passo a passo o que estamos fazendo.
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 em jogar com document.createElement() e elmt.appendChild() Junto com os atributos de cada item para obter a estrutura desejada.
Nós já temos a janela criada. Agora você precisa preencher todos os seus componentes com os dados 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, você tem que destacar um par de aspectos. O primeiro é o uso de variable=valor || ''. Isso atribui o valor à variável, mas, caso esse valor seja inválido (null ou undefined), o seguinte será usado valor indicado após a barra vertical dupla.Nesse caso, ele permanecerá em branco, mas seria aconselhável alterá-lo pelo título da sua página, por exemplo.
O segundo aspecto é o uso da função isNaN(). Esta função retorna true Se o parâmetro indicado não for um número (já que NAN significa não para o número). Portanto, quando você negá-lo, sabemos que a condição só será executada quando o valor do alto e a largura é válido.
Em seguida, continuamos adicionando os botões que aparecerão no rodapé:
// 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);}
Até aqui já temos o botão “Aceitar” e a entrada, se necessário, criá-las. Como a caixa de texto não faz parte de qualquer forma, pressionando Enter, nada acontecerá. Nós resolvemos isso adicionando o evento keydown, onde verificamos se a tecla pressionada é a introdução, e nesse caso fechamos a janela e executamos a função correspondente ao botão OK, passando como parâmetro o valor da entrada.
, para o conforto do usuário, colocamos o foco na entrada apenas abra a janela. Colocamos um atraso de 100 milissegundos (valor totalmente arbitrário) de modo que ele dá tempo para a janela ser criado e aberto, já que, se o fizermos, ainda é visível na página.
ao executar o Função do botão OK, passamos o parâmetro param.value. Se não houver entrada, esse valor será nulo, enquanto quando houver, o valor corresponderá ao texto inserido. Desta forma, não temos que nos preocupar em controlar se o parâmetro deve ou não ser passado e evitar possíveis erros.
O código para criar o botão Cancelar é muito semelhante ao anterior, mas o fato de não usar qualquer parâmetro torná-lo mais simples.
// 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, você tem que verificar se os botões foram criados. Se não, eliminamos o rodapé, já que não será usado, e nós o indicamos com a classe “Nofooter”, que usaremos do CSS. Feito isso, é só para adicionar a classe “visível”, que mostrará a janela. A razão pela qual nós atrasamos 50 milissegundos é, como antes com a entrada, porque esperamos que a janela tivesse gerado.
considerações de demonstração e finais
apenas sinto falta do código em um função, que vamos rodar quando quisermos abrir a janela. Este é o resultado e demonstração das opções disponíveis para a janela modal:
Veja a janela JMGModal da caneta por KSES (@kside) no codepen.
Na parte do CSS Não é novidade para destacar (se talvez, melhorias de design sejam permitidas …). Basicamente, a coisa mais importante é a classe , que controlará a abertura da janela. Os seletores selecionados podem ser otimizados, mas eu preferi deixá-los assim para uma melhor compreensão do elemento para o qual eles apontam.
Na operação da janela, eu escolhi sempre manter o X de fechamento botão para ser a coisa menos intrusiva para o usuário.