Marzo 13, 2021

Ventá modal con jQuery

Neste tutorial veremos como crear unha xanela modal con jQuery que se amosará en forma de emerxente premendo un botón. No caso de que non coñezas jQuery, é aconsellable que teñas un ollo no tutorial de introdución a jQuery.

Unha xanela MODAL, é unha xanela de diálogo que normalmente se mostra na pantalla sobre o resto de Os contidos, xeralmente, o Windows Modal bloquea o acceso ao resto dos contidos da páxina ata que interactúa con eles de algunha maneira. Utilízanse como substitución das mensaxes de alerta alert() de calquera navegador, de xeito que se obteña unha xanela máis homoxénea e personalizable.

Antes de comezar, inclúe jQuery No seu proxecto e, a continuación, siga os pasos que ve a continuación.

Versión simplificada

Primeiro crearemos unha versión sinxela que só ten estilos asociados. É común que as fiestras modais se mostren nunha cobertura ou a superposición que difunda o contido da páxina de algunha maneira. Deste xeito implícase que o usuario debe interactuar coa xanela. É por iso que engadiremos un ao que asignaremos a clase .overlay.

Seguinte que somos Vai engadir a xanela, que terá a clase .modal e tamén un botón que lle permite abrir. Na xanela, tamén haberá un botón que lle permita pechalo:

<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>

Seguinte, engadiremos o código jQuery, que consistirá nunha acción que asigna a clase .active tanto para a superposición como a xanela cando facemos clic no botón de apertura. Tamén engadiremos outro que elimina a clase .active de ambos elementos premendo o botón de peche.

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

a Continuación definiremos os estilos CSS. A parte máis relevante está na clase .active que alterna a visibilidade da superposición e a xanela modificando a súa z-index e a súa propiedade visibility respectivamente. A súa opacidade tamén será modificada para crear unha transición.

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

e con esta versión básica da nosa xanela modal estará listo. Podes ver o resultado en funcionamento aquí.

Versión avanzada

A partir da versión simplificada, engadiremos unha acción máis, polo que a xanela tamén está preto cando presionamos a tecla ESC :

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

Tamén engadiremos certos estilos CSS para que non pareza que a xanela modal é de 20 anos:

E como podes ver no resultado final, o aspecto da nosa xanela mellorou moito. Podes ver o resultado na operación aquí.

Avatar de edu lázaro

Edu Lázaro : Enxeñeiro Técnico en Computación, actualmente traballo como desenvolvedor web e programador de videojuegos.

👋 Hola! Eu son edu, encántame crear cousas e escribín esta guía. Se foi útil, o maior favor que podería facerme é compatmente en Twitter 😊

Se desexa coñecer os meus proxectos, siga-me en Twitter.

Deixa unha resposta

O teu enderezo electrónico non se publicará Os campos obrigatorios están marcados con *