Come realizzare un finestra modale con jQuery

Tramite: O2O
Difficoltà: media
16

Introduzione

Una finestra modale è una finestra “figlia” bloccante, ossia una finestra che richiede una certa interazione dell’utente, prima che egli possa tornare ad operare sulla finestra “padre”. Nella progettazione delle interfacce, le finestre modali possono essere utilizzate per diversi scopi quali: forzare l’attenzione dell’utente su un determinato argomento o allertarlo di eventuali conseguenze irreversibili; determinare, univocamente, il flusso di operazioni da eseguire sulla finestra padre, nel caso vi fossero diverse alternative, la cui scelta è legata alla volontà dell’utente. Per realizzare una finestra modale con jQuery, in maniera semplice e senza l’utilizzo di script già predisposti, è necessario eseguire alcuni passaggi indispensabili. Ecco che si da il via a questa guida su come realizzare una finestra modale con jQuery.

26

Creazione file

Creare il file javascript contenente il plugin ossia il codice che definisce la finestra e le azioni che la caratterizzano. La definizione del plugin, in sostanza, è la sequenza di azioni derivanti dall'evento che ha generato l’apparizione della finestra modale. Il file avrà estensione. Js. Dopo che avete fatto ciò passate al passo 2.

36

Addblock

Disabilitare la pagina principale o “padre”. La funzione add_block_page () contiene il codice necessario a tale azione. Essa implementa le azioni necessarie ad impedire, all'utente, l’accesso all'area sottostante la finestra modale. Ciò si ottiene creando un
che copre la finestra padre e inserendo al suo interno la finestra modale.

Continua la lettura
46

La creazione

Creare e disegnare la finestra modale. La creazione, non stilizzata, è implementata tramite la funzione add_popup_box (). Questa funzione crea un
con un titolo, una descrizione ed un link per chiudere la finestra modale. Successivamente, la finestra modale viene aggiunta al
bloccato ed è definita la funzione che, in seguito al click di chiusura della finestra, ne implementa la rimozione. Per stilizzare la finestra, è necessario definire degli stili: quello relativo alla finestra padre e quelli (in fase di apertura e di chiusura) della finestra modale. La definizione degli stili può essere fatta all'interno del codice stesso oppure importando dei CSS predefiniti. Il disegno finale è implementato dalla funzione fadeIn () applicata alla box modale.

56

Il plugin

Includere il plugin all'interno del codice generale. È necessario che venga incluso anche jQuery, oltre il plugin creato. Il codice deve essere inserito all'interno dell’head della pagina html. Infine, è necessario inserire il tag per invocare l’apertura della finestra. E’ buona norma definire il tag. Questo è stato il quarto ed ultimo passo di questa guida.

Potrebbe interessarti anche

Segnala contenuti non appropriati

Tipo di contenuto
Devi scegliere almeno una delle opzioni
Descrivi il problema
Devi inserire una descrizione del problema
Si è verificato un errore nel sistema. Riprova più tardi.
Verifica la tua identità
Devi verificare la tua identità
chiudi
Grazie per averci aiutato a migliorare la qualità dei nostri contenuti

Guide simili

Programmazione

Creare una tabella dinamica parametrizzata in Jquery

Spesso capita di dover inserire una tabella nelle pagine web. In alcuni casi questo è un problema perché richiede un lungo procedimento. La soluzione è a portata di mano con jQuery, una libreria di funzioni Javascript per le applicazioni web. Il Javascript...
Programmazione

Come iniziare con JSON

Sia che siate degli studenti o dei programmatori di lungo corso sicuramente conoscerete la sigla Json che sta per JavaScript Object Nation. SI tratta infatti di un importantissimi linguaggio basato su javaScript Standard e utilizzato in AJAX come alternativa...
Programmazione

Come realizzare un testo colorato in Java

Realizzare un testo colorato in Java che sia presente all'interno di una finestra grafica è un'operazione relativamente semplice, ma può risultare complicata per coloro che fanno uso del linguaggio di programmazione in questione per la prima volta....
Programmazione

Come creare app in HTML5

Un'applicazione Web è alimentata da un browser tramite Internet e viene generalmente creata utilizzando HTML, CSS e JavaScript e può essere servita tramite un browser desktop o mobile. Un'applicazione web può essere costruita per imitare la funzionalità...
Programmazione

Come realizzare un sito usando Java

Con la navigazione in internet si possono visitare di continuo delle serie infinite di siti e pagine. Tanti utenti, per varie necessità, hanno infatti bisogno di realizzare un sito internet. Magari per pubblicizzare la propria attività lavorativa. Oppure...
Programmazione

Come realizzare un programma di archiviazione

L' archiviazione di dati è, se vogliamo, la prima funzione per cui sono stati progettati i computer, per questo uno dei primi lavori che i programmatori si sono visto commissionare è appunto la creazione di programmi con funzione di archivio dati. Vi...
Programmazione

Come inserire musica di sottofondo in Java

Che sia lavoro, che sia relax o qualsiasi altro momento una bella canzone di sottofondo non guasta mai e ascoltando le nostre preferite ci fa felici, ecco che oggi andiamo a vedere come inserire musica di sottofondo in Java. Per prima cosa andiamo a creare...
Programmazione

Come realizzare animazioni con JavaScript

Tra i linguaggi di scripting esistenti Javascrispt è quello tutt'oggi utilizzato anche se superato da altri più moderni. Questo linguaggio si basa su una sintassi Java, ma esso è reso più semplice e diretto in quanto svolge il codice script riga dopo...
I presenti contributi sono stati redatti dagli autori ivi menzionati a solo scopo informativo tramite l’utilizzo della piattaforma www.o2o.it e possono essere modificati dagli stessi in qualsiasi momento. Il sito web, www.o2o.it e Arnoldo Mondadori Editore S.p.A. (già Banzai Media S.r.l. fusa per incorporazione in Arnoldo Mondadori Editore S.p.A.), non garantiscono la veridicità, correttezza e completezza di tali contributi e, pertanto, non si assumono alcuna responsabilità in merito all’utilizzo delle informazioni ivi riportate. Per maggiori informazioni leggi il “Disclaimer »”.