març 13, 2021

Finestra modal amb jQuery

En aquest tutorial veurem com crear una finestra modal amb jQuery que es mostri en forma de popup a l’prémer un botó. En cas que no coneguis jQuery, és recomanable que li facis un ull a el tutorial d’introducció a jQuery.

Una finestra modal, és una finestra de diàleg que se sol mostrar en pantalla per sobre de la resta dels continguts, Habitualment, les finestres modals bloquegen l’accés a la resta dels continguts de la pàgina fins que es interactua amb elles d’alguna manera. S’utilitzen a manera de reemplaçament dels missatges d’alerta alert() de qualsevol navegador, de manera que s’obtingui una finestra més homogènia i personalitzable.

Abans de començar, inclou jQuery en el teu projecte i després segueix els passos que veus a continuació.

versió simplificada

Crearem primer una versió simple que amb prou feines tingui estils associats. És habitual que les finestres modals es mostrin sobre una coberta o overlay que difumini d’alguna manera el contingut de la pàgina. D’aquesta manera es dóna a entendre que l’usuari ha d’interactuar amb la finestra. És per això que afegirem primer un div a què assignarem la classe .overlay.

Tot seguit anem a afegir la finestra , que tindrà la classe .modal i també un botó que permeti obrir-la. A la finestra, també hi haurà un botó que permeti tancar-la:

<h1>Modal</h1><div class="overlay"></div><div class="modal"> <h2>Modal</h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> <button class="close">Close</button> </div><button class="open">Open</button>

Tot seguit, anem a afegir el codi jQuery, que constarà d’una acció que assigni la classe .active tant a l’overlay com a la finestra quan fem clic al botó d’obertura. També afegirem una altra que que elimini la classe .active de tots dos elements a l’prémer el botó de tancament.

$(".open").on("click", function(){ $(".overlay, .modal").addClass("active");});$(".close, .overlay").on("click", function(){ $(".overlay, .modal").removeClass("active");});

A continuació definirem els estils CSS. La part més rellevant és a la classe .active que s’alterna la visibilitat de l’overlay i de la finestra modificant la seva z-index i la seva propietat visibility respectivament. També es modificarà la seva opacitat per crear una transició.

.overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; transition: .3s ease; z-index: -1; background: #000;}.overlay.active { opacity: 0.5; z-index: 2;}.modal { color: #fff; background: #000; max-height: calc(100% - 100px); position: fixed; top: 50%; left: 50%; max-width: 450px; transform: translate(-50%, -50%); visibility: hidden; opacity: 0; transition: .3s ease;}.modal.active { visibility: visible; z-index: 2; opacity: 1;}

I amb això ja estaria a punt una versió bàsica de la nostra finestra modal. Pots veure el resultat en funcionament aquí.

Versió avançada

Partint de la versió simplificada, anem a afegir una acció més, de manera que la finestra també es tanqui quan premem la tecla ESC :

$(document).keyup(function(e) { if (e.keyCode === 27) { $(".overlay, .modal").removeClass("active"); }});

Anem a afegir també certs estils CSS perquè no sembli que la finestra modal és de fa 20 anys:

html {min-height: 100%;font-family: 'Nunito', sans-serif;}body { background: #7db4fc; line-height: 1.5; text-align: center;}h1 { font-weight: 200; font-size: 3rem; color: white; text-align: center;}.overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.5); opacity: 0; transition: .5s ease; z-index: -1;}.overlay.active { opacity: 1; z-index: 2;}.modal { max-height: calc(100% - 100px); position: fixed; top: 50%; left: 50%; max-width: 450px; transform: translate(-50%, -50%); color: #4a5666; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24); z-index: 3; visibility: hidden; opacity: 0; transition: .5s ease;}.modal h2 { margin: 0; font-weight: 400; padding: 1rem; border-bottom: 1px solid #DDE0E7;}.modal p { padding: 1rem;}.modal.active { visibility: visible; opacity: 1;}button { display: inline-block; background: rgba(10, 20, 30, .3); border: 1px solid transparent; color: white; text-decoration: none; font-size: 1.2rem; padding: 1rem 2rem; border-radius: 45px; margin: .25rem 0; vertical-align: middle; line-height: 1; overflow: visible; cursor: pointer;}button:hover { border: 1px solid rgba(255, 255, 255, .8); color: white; background: rgba(255, 255, 255, .1);}button.close { margin: 0 0 1rem; background: #FC6468;}button.close:hover { border: 1px solid #FC6468; color: #FC6468; background: transparent;}

i tal com pots veure en el resultat final, l’aspecte del nostre finestra ha millorat bastant. Pots veure el resultat en funcionament aquí.

Avatar d'Edu Lazaro

Edu Lázaro: Enginyer tècnic en informàtica, actualment treball com a desenvolupador web i programador de videojocs.

👋 Hola! Sóc Edu, m’encanta crear coses i he redactat aquesta guia. Si t’ha resultat útil, el més gran favor que em podries fer és el de compatirla a Twitter 😊

Si vols conèixer els meus projectes, segueix-me a Twitter.

Deixa un comentari

L'adreça electrònica no es publicarà. Els camps necessaris estan marcats amb *