Marzo 13, 2021

Finestra modale con jQuery

In questo tutorial vedremo come creare una finestra modale con jQuery che viene visualizzato sotto forma di un popup premendo un pulsante. Nel caso in cui non si conosca JQuery, è consigliabile che tu voglia occhio sul tutorial dell’introduzione a jQuery.

una finestra modale, è una finestra di dialogo che viene solitamente visualizzata sullo schermo sopra il resto di I contenuti, di solito, il blocco di Windows Modal accede al resto del contenuto della pagina finché non interagisce con loro in qualche modo. Sono usati come sostituzione dei messaggi di avviso alert() di qualsiasi browser, in modo da ottenere una finestra più omogenea e personalizzabile.

Prima di iniziare, include jQuery Nel tuo progetto e quindi seguire i passaggi che vedi sotto.

Versione semplificata

Creeremo per la prima volta una versione semplice che ha solo stili associati. È comune che le finestre modali vengano visualizzate su una copertura o una sovrapposizione che diffonde il contenuto della pagina in qualche modo. In questo modo è implicito che l’utente deve interagire con la finestra. Questo è il motivo per cui aggiungeremo un a cui assegneremo la classe .overlay.

Avanti Per aggiungere la finestra, che avrà la classe .modal e anche un pulsante che ti consente di aprirlo. Nella finestra, ci sarà anche un pulsante che consente di chiuderlo:

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

Avanti, aggiungeremo il codice jQuery, che consisterà in un Azione che assegna la classe .active sia alla sovrapposizione che alla finestra quando facciamo clic sul pulsante Apertura. Aggiungeremo anche un altro che elimineremo la classe .active di entrambi gli elementi premendo il pulsante di chiusura.

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

a Continuazione Definiremo gli stili CSS. La parte più rilevante è nella classe .active che alterna la visibilità della sovrapposizione e della finestra modificando il suo z-index e la tua proprietà visibility rispettivamente. La tua opacità verrà anche modificata per creare una transizione.

.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 questa versione di base della nostra finestra modale sarà pronta. Puoi vedere il risultato in funzione qui.

versione avanzata

A partire dalla versione semplificata, aggiungeremo un’altra azione, quindi la finestra è anche chiusa quando premiamo il tasto ESC :

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

Aggiungeremo anche alcuni stili CSS in modo che non sia come se la finestra modale sia 20 anni fa:

E come puoi vedere nel risultato finale, l’aspetto della nostra finestra è migliorato molto. Puoi vedere il risultato in funzione qui.

Avatar of Edu Lazaro

edu lázaro : Ingegnere tecnico nel calcolo, attualmente lavoro come programmatore Web e programmatore di videogame.

👋 Ciao! Io sono edu, amo creare cose e ho scritto questa guida. Se sei stato utile, il più grande favore che potresti fare è quello di costantemente su Twitter 😊

Se vuoi conoscere i miei progetti, seguimi su Twitter.

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *