Come realizzare un finestra modale con jQuery

tramite: O2O
Difficoltà: media
15

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.

25

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.

35

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
45

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.

55

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

Internet

Come creare un menu dropdown con Jquery

Buongiorno e benvenuti in questa nuova guida, dove andremo a creare un menu a tendina, in inglese "informatichese" detto dropdown menu, con l'utilizzo di ...
Software

Come costruire un menu con immagini animate in jQuery

Stai realizzando un sito web? Oltre ad aver curato in tutti gli aspetti l'architettura dei suoi contenuti, avrai subito notato che bisogna prestare particolare ...
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 è ...
Programmazione

Come usare il metodo animate di jQuery

JQuery è una libreria di funzioni scritta in Javascript, che può essere utilizzata su diversi browser e permette di aggiungere delle funzionalità alle pagine HTML ...
Internet

Come creare uno slideshow con NivoSlivder

Se avete bisogno di utilizzare uno slideshow che sia semplice sia nell'installazione, sia nella configurazione che nell'utilizzo, allora il NivoSlivder è uno dei ...
Programmazione

Php: interazione con i database

Come forse voi lettori e lettrici già saprete, quando parliamo di PHP (che è l'acronimo inglese di Hypertext Preprocessor) intendiamo quel linguaggio della programmazione ...
Programmazione

Come usare jQuery Mobile

Da qualche tempo gli sviluppatori di software si sono posti il problema di creare degli “script” (particolari programmi scritti in un dato linguaggio di programmazione ...
Windows

Come creare e utilizzare una query per salvare come tabella le informazioni estratte in Access

Utilizzando spesso dei database, potrebbe essere possibile dover ricorrere all'impiego delle query in maniera continuativa e non voler ripetere sempre le stesse operazioni. Una ...
Programmazione

Php: interazione con i database

Quando si parla di PHP (che è l'acronimo inglese di Hypertext Preprocessor) si intende quel linguaggio della programmazione inteso per la creazione di pagine ...
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 ...
Programmazione

Come prendere le coordinate del mouse con JQuery

Il mouse è un piccolo dispositivo di cui spostamento sulla nostra scrivania determina un corrispondente spostamento del puntatore sullo schermo. Il dispositivo può essere utilizzato ...
Software

Come creare un pannello scorrevole verticale usando jQuery e CSS3

Spesso è capitato di restare colpiti dalle animazioni grafiche di qualche notizia letta in rete o da una presentazione che ci è stata sottoposta e ...
Windows

Come creare e modificare le query in Access

Access è un potente database relazionale che viene fornito nella suite Professional di Office e permette la creazione di applicazioni attraverso una intuitiva interfaccia per ...
Windows

Come creare scorciatoie da tastiera per Firefox

Mozilla Firefox è uno dei tanti browser disponibili on-line che permette la navigazione nel world wide web. Una delle caratteristiche principali di questo strumento è ...
Windows

Come schedulare un job in SQL Server

Molto spesso si pensa che schedulare un job sia una cosa impossibile e ancora più difficile aggiungere varie schedulazioni o alert per l'utente con ...
Programmazione

Come utilizzare Linq in C#

In questa guida vi fornirò tutte le indicazioni utili come utilizzare nel migliore dei modi il linguaggio Linq, vale a dire il Language-Integrated Query per ...
Programmazione

Come creare una calcolatrice con Dev C++

Dev C++ rappresenta un IDE completamente gratuito, distribuito e messo a disposizione dell'utente sotto Licenza GNU per la programmazione in linguaggio C e C ...
Programmazione

Come nascondere i paragrafi in Jquery con un click

Tutte le pagine web che quotidianamente utilizziamo sono ricche di effetti di ogni tipo, la cui presenza è garantita dall'impiego del linguaggio JavaScript. L ...
Windows

Come creare controlli associati e non associati per una query

Le informazioni inserite in una maschera sono contenute all'interno di controlli, distinti in tre tipologie. Vi sono i controlli associati, i controlli non associati ...
Internet

Come creare un plugin per wordpress

Wordpress è un CMS opensource, vale a dire un Content Management System, cioè una piattaforma per la gestione di contenuti dinamici: si tratta di un ...
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»”.