Générer des fenêtres modales avec pure JavaScript et sa CSS à la golfe17.7.17

Génération de fenêtres modales avec pure JavaScript et son CSS à goûter

Note de l’éditeur: Le poste que vous devez lire est le travail de Jorge MG posté dans ESCSS en tant qu’article par le auteur invité. Vous trouverez ci-dessous la voie à créer des manières avec le minimum de pure JavaScript (sans avoir besoin d’une bibliothèque) et peut donc être capable d’appliquer les styles que vous créez pratiques ou dont vous avez besoin.
Comme tous les articles de travailleurs indépendants demeurent En dehors de la licence de beerware du blog. Tout aspect relatif à cela doit le traiter directement avec son auteur.
Après une appropriation indue de quelqu’un, ce post et le script sont comme
Copyright (c) 2016 Jorge MG (@itsjorgemg sur Twitter)

« > , confirm() et

sont très utiles pour montrer ou demander des données au moment de développer une page Web. Bien sûr, au moment de la production, son inconvénient principal est que sa conception et son style dépendent du navigateur, et nous ne pouvons pas la modifier.

Pour résoudre cet aspect, nous allons créer notre propre fenêtre modale avec JavaScript avec les mêmes performances que celles générées par le navigateur, mais avec l’avantage de pouvoir ajouter des styles via CSS.

Si vous recherchez en ligne, vous trouverez sûrement des milliers de réalisations comme celle-ci, mais Vous pouvez dépendre des autres librairies ou d’avoir une multitude d’options que vous n’utiliserez jamais. L’objectif de cet article est donc de savoir comment configurer votre propre fenêtre modale, étape par étape, avec le code minimal possible (1 fonction JavaScript unique) et avec les options dont vous avez besoin.

si vous voulez que quelque chose sortait comme vous le souhaitez, faites-le vous-même.

Au fait, si vous manquez une option, ou décide d’étendre Cette démo, je vous encourage à vous dire dans un commentaire.

paramètres et options de la fenêtre

avant de commencer à écrire le code, vous devez poser les fonctions que vous pouvez faire. De cette manière, pour exécuter la fonction qui affichera la fenêtre devra indiquer les paramètres suivants:

• ID: un identifiant pour pouvoir inclure une fenêtre à l’intérieur d’un autre

> Données: un objet JSON avec les propriétés suivantes:

• Titre: Titre de la fenêtre qui sera affiché dans votre en-tête
• largeur: largeur du panneau, en pixels
• Hauteur : Hauteur du panneau, en VH. Par exemple, la valeur 50 provoquera la hauteur de la moitié modale que celle de l’écran (fenêtrePort). La largeur et l’élevage seront contrôlées de CSS pour empêcher que le modal d’être supérieur à la fenêtre, quelle que soit la valeur indiquée dans ces propriétés
• contenu: message qui affichera la fenêtre. Il peut s’agir du code HTML. De CSS, nous pouvons spécifier des règles pour qu’une seule image ou une iframe est affichée dans le modal

kechet): éventuellement, nous pouvons afficher un bouton du type « Accepter » ou « ok ». Ce paramètre doit être un tableau, dont le premier élément sera le titre du bouton et la seconde, une fonction qui sera exécutée en appuyant sur le bouton

• Annuler: optionnel, avec la même opération que le précédent , mais du type « Annuler ». Il devrait également s’agir d’une matrice du type:
• entrée: facultatif, pour afficher une zone de texte, de la même manière que la fonction prompt(). Ce paramètre doit être un tableau d’un seul élément: l’espace réservé de l’entrée. Pour cette entrée, il est nécessaire d’indiquer le paramètre « OK », car le texte écrit sera reçu en tant que paramètre de fonction

générant la fenêtre et ses boutons

Avec cette approche, nous pouvons commencer. Le modal ne sera pas écrit dans le HTML, tout d’abord, il sera nécessaire de le créer via JavaScript. Après avoir ouvert une fois, le modal existera déjà et donc, il ne sera pas nécessaire de le générer à nouveau. Je commente le code pour indiquer étape par étape ce que nous faisons.

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);}

consiste essentiellement à jouer avec et elmt.appendChild() avec les attributs de chaque élément pour obtenir la structure souhaitée.

Nous avons déjà la fenêtre créée. Maintenant, vous devez remplir tous vos composants avec les données correspondantes.

// 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';

de cette partie, vous devez mettre en évidence deux aspects. Le premier est l’utilisation de variable=valor || ''. Cela attribue la valeur à la variable, mais, au cas où la valeur est invalide (null ou undefined), ce qui suit sera utilisé la valeur indiqué après la double barre verticale.Dans ce cas, il restera vide, mais il serait souhaitable de le modifier par le titre de votre page, par exemple.

Le deuxième aspect est l’utilisation de la fonction isNaN(). Cette fonction renvoie true si le paramètre indiqué n’est pas un nombre (puisque NAN signifie pas à Numéro). Par conséquent, lorsque vous le refusez, nous savons que la condition ne fonctionnera que lorsque la valeur de la haute et de la largeur est valide.

Ensuite, nous continuons à ajouter les boutons qui apparaîtront sur le pied de page:

// 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);}

jusqu’à présent, nous avons déjà le bouton « Accepter » et l’entrée, si nécessaire les créer. Lorsque la zone de texte ne fait partie d’aucune forme, appuyez sur Entrée, rien ne se passera. Nous résolvons cela en ajoutant l’événement de clés, où nous vérifions si la touche appuyée est l’intro et que nous fermons la fenêtre et exécutons la fonction correspondant au bouton OK, passant comme paramètre la valeur de l’entrée.

, pour le confort de l’utilisateur, nous mettons l’accent sur l’entrée d’ouverture de la fenêtre. Nous mettons un retard de 100 millisecondes (valeur totalement arbitraire) de sorte qu’il donne du temps à la création et à l’ouverture de la fenêtre, car si nous le faisons, il est toujours visible sur la page.

Lors de l’exécution du Fonction de bouton OK, nous passons le paramètre param.value. S’il n’y a pas d’entrée, cette valeur sera nulle, alors que la valeur correspondra au texte saisi. De cette manière, nous n’avons pas à vous soucier de contrôler si le paramètre doit être transmis ou non et éviter les erreurs éventuelles.

Le code pour créer le bouton Annuler est très similaire à celui précédent, mais le fait de ne pas utiliser de paramètre le rend plus simple.

// 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);

Enfin, vous devez vérifier si les boutons ont été créés. Sinon, nous éliminons le pied de page, car il ne sera pas utilisé, et nous l’avons indiqué avec la classe « nofooter », que nous utiliserons de CSS. Fait cela, il est seulement laissé à ajouter la classe « visible », qui montrera la fenêtre. La raison pour laquelle nous retardons 50 millisecondes est, tout comme avec l’entrée, car nous nous attendons à ce que la fenêtre ait généré.

démo et considérations finales

me manquez simplement le code dans un fonction, que nous allons courir lorsque nous voulons ouvrir la fenêtre. C’est le résultat et la démo des options disponibles pour la fenêtre modale:

Voir la fenêtre PEN JMGModal de Kys (@kside) sur Codepen.

dans la partie du CSS n’est rien de nouveau pour mettre en évidence (si peut-être, des améliorations de conception sont autorisées …). Fondamentalement, la chose la plus importante est la classe , qui contrôlera l’ouverture de la fenêtre. Les sélecteurs sélectionnés peuvent être optimisés, mais j’ai préféré les laisser comme ceci pour une meilleure compréhension de l’élément auquel ils pointent.

sur le fonctionnement de la fenêtre, j’ai choisi par toujours en gardant toujours la fermeture x bouton pour être la chose la moins intrusive pour l’utilisateur.