Finestra modale Jquery con sfondo sfocato. Crea un modale popup jQuery. jQuery modale
Parlando di varie tecniche di costruzione del sito, sarebbe ridicolo non parlare di alcuni dei modi per creare finestre modali. Non discuteremo lo scopo, l'utilità e i problemi emergenti dell'utilizzo di pop-up, finestre modali. Analizziamo solo uno dei tanti esempi di creazione di tali finestre. Ci sono situazioni in cui non è possibile utilizzare plugin speciali, ad esempio come e, quindi vale la pena capire come puoi crearne uno tuo.
Vediamo come fare:
HTML
Iniziamo aggiungendo tag con i seguenti attributi:
href - #? w = 500 indica la larghezza della finestra
rel - un attributo univoco per ogni finestra
class = "poplight" - classe per mostrare la finestra pop-up
<
a href=
"#?w=500"
rel=
"popup_name"
class
=
"poplight"
>Guarda la finestra in azione - Larghezza = 500 px
Guarda la finestra in azione - Larghezza = 500 px
Successivamente, dobbiamo creare un markup in linea per il popup. Puoi posizionarlo in qualsiasi punto della pagina, ad esempio nella parte inferiore del contenuto. Nota che l'id del popup corrisponde all'attributo rel etichetta Questo collegherà il collegamento e il popup insieme.
Intestazione
Qualsiasi testo che il tuo cuore desidera
E così, abbiamo capito il posizionamento della nostra finestra sulla pagina, ora stiliamola con gli stili, diamole, per così dire, un aspetto decente.
Layout CSS
Per motivi di chiarezza, ho scritto alcune spiegazioni per i parametri di stile della nostra finestra. Poiché i popup possono essere di dimensioni diverse, non specifichiamo nel CSS popup_block i bordi della finestra, per calcolare la dimensione richiesta, questo è solo il compito per.
Con la formazione della finestra e il suo aspetto tramite css, penso che non ci saranno particolari difficoltà. Gli stili possono essere scritti direttamente sulla pagina HTML, tra i tag
e, oppure puoi mettere i tuoi stili in un file separato, di solito questo è un file stile.css, o qualcosa di simile.
Configurazione JQuery
Per il lavoro completo della finestra modale, è necessario connettere jQuery, coloro che non hanno familiarità con il lavoro di questa libreria possono leggere.
Bene, andremo avanti. Puoi utilizzare la versione più recente di jQuery dal sito web della biblioteca o utilizzare un file separato ospitato in Google collegandolo al documento nella sezione prima del tag di chiusura
inserendo una riga come questa:
Nel passaggio successivo, esamineremo il riempimento e le funzioni del plugin jquery, per attivare la nostra finestra popup, il codice contiene alcune spiegazioni per una migliore comprensione di ciò che stiamo facendo.
Plugin JQuery
$ (documento). pronto (funzione () ( // Quando si fa clic sul collegamento con la classe poplight e l'href dell'attributo tag insieme a #$ ("a.poplight"). click (function () (var popID = $ (this). attr ("rel"); // prendi il nome della finestra, è importante non dimenticare di cambiare il nome nell'attributo rel del collegamento quando ne aggiungi di nuovi var popURL = $ (questo). attr ("href"); // ottengo la dimensione dall'attributo href del collegamento// richiesta e variabili da href url var query = popURL. diviso ("?"); var dim = interrogazione [1]. diviso ("&"); var popWidth = dim [0]. dividere ("=") [1]; // primo valore della stringa di query// Aggiungi un pulsante di chiusura alla finestra$ ("#" + ID pop). dissolvenza (). css (("larghezza": Numero (popWidth))). anteporre ( ""
)
;
// Determina il margine (margine) per l'allineamento al centro (verticale e orizzontale) - aggiungiamo 80 all'altezza / larghezza, tenendo conto del riempimento + larghezza del bordo definito in css var popMargTop = ($ ("#" + ID pop). altezza () + 80) / 2; var popMargLeft = ($ ("#" + ID pop). width () + 80) / 2; // Imposta la quantità di riempimento$ ("#" + ID pop). css (("margin-top": - popMargTop, "margin-left": - popMargLeft)); // Aggiungi uno sfondo ombreggiato semitrasparente$ ("corpo"). aggiungere (" "
)
;
// il contenitore div verrà scritto prima del tag.
$ ("# dissolvenza"). css (("filtro": "alpha (opacità = 80)")). dissolvenzaIn (); // traslucenza dello strato, filtro per IE opaco restituire falso; )); // Chiude la finestra e l'ombreggiatura dello sfondo$ (documento). on ("clic", "a.chiudi, #fade", funzione () ( // chiudi al clic fuori dalla finestra, ad es. sullo sfondo ...$ ("# dissolvenza, .popup_block"). fadeOut (function() ($ ("# fade, a.close"). remove (); // dissolvenza)); restituire falso; )); ));
In generale, se non vai nella giungla e non ti carichi di inutili code senza senso, la nostra meravigliosa finestra modale è pronta per funzionare e aspetta che i tuoi pensieri vengano tradotti in testo o qualsiasi altra informazione utile. Per chi volesse utilizzare una finestra modale per inserire video o immagini di grandi dimensioni, consiglio comunque di utilizzare plugin speciali come, poiché l'esempio sopra di una finestra modale è destinato più a informazioni leggere e non molto pesanti, anche se se lo si desidera, questo non è un problema. ...
La prossima volta te lo dirò sicuramente e ti mostrerò con un esempio, e sicuramente molti saranno interessati a conoscere altri oggetti di terze parti nella finestra pop-up. Quindi non perderti sul web e resta sintonizzato!
Aggiornare: Versione dm-modal.js v1.3 (15.01.2017) Fisso: Sostituita la funzione .live () deprecata utilizzando la sintassi href * = \\ #. Il plugin ora funziona con le ultime versioni della libreria jQuery
È tutto! Spero che tu abbia un altro tutorial utile.
Con tutto il rispetto, Andrew
1. Finestra modale su jQuery "Simple Modal Box"
2. Plugin jQuery "LeanModal"
Visualizzazione dei contenuti in modalità modali. Per vedere il plugin in azione nella pagina demo, clicca sul link: Modulo di iscrizione o Contenuto di base.
3. Plugin jQuery "ToastMessage"
Messaggi a comparsa. Il plugin è disponibile in due versioni. In un caso, i messaggi scompaiono da soli, dopo un certo tempo, nella seconda implementazione, per chiudere il messaggio, è necessario fare clic sul pulsante.
4. Contenuto che compare nella finestra modale
Plugin "Rivela". Per vedere il plugin in azione, fai clic sul pulsante "Fire A Reveal Modal" nella pagina demo.
5. Finestre di dialogo carine
Clicca sulla croce nella pagina demo per vedere il plugin in azione.
6. Finestra modale di Mootools, plugin "MooDialog"
7. barra a comparsa jQuery nella parte superiore dello schermo
8.jQuery popup
Plugin jQuery per la visualizzazione di un modulo di feedback in una finestra popup.
10. Plugin "LightFace" di MooTools per l'implementazione delle finestre di dialogo di Facebook
Finestre di dialogo in stile Facebook. Oltre alle informazioni statiche, è possibile inserire nelle finestre immagini, frame, richieste Ajax. Molte impostazioni del plugin, uno strumento molto potente. Sembra molto elegante e funzionale. Segui i link nella pagina demo per vedere esempi con contenuti diversi.
11.jQuery modale
Una finestra di dialogo popup jQuery ordinata.
12. Modalità jQuery
Simpatiche finestre modali pop-up. Tre stili. La pagina demo fornisce 3 collegamenti per chiamare Windows.
13. Modalità jQuery
Finestre modali pop-up di diversi tipi. Per vedere il plugin in azione, clicca sul link nella pagina demo.
15. Messaggio pop-up sulla pagina
Il messaggio viene visualizzato sulla pagina, che a sua volta è oscurata. Fare clic su "Fai clic su di me" nella pagina demo per visualizzare un messaggio pop-up. Cliccando sulla croce si chiuderà. Implementato con jQuery.
16. Finestra modale "ModalBox" in javascript
Implementazione di moderne finestre di dialogo modali senza l'utilizzo di popup e ricaricamenti di pagine. Nella pagina demo, fai clic sul pulsante "Avvia demo" per vedere come funziona lo script.
17. Plugin "Leightbox" che utilizza la libreria Prototype
Plugin per la visualizzazione di contenuti in finestre modali.
Abbastanza spesso, puoi trovare modali sui siti e sono tutti utilizzati per compiti diversi. In effetti, è uno strumento piuttosto potente che ti consente di rendere l'interfaccia del sito più interattiva e user-friendly. Ad esempio, le finestre modali possono essere utilizzate per vari moduli, come un modulo di autorizzazione, un modulo di feedback, l'ordinazione di un prodotto e non si sa mai.
In questo post, daremo un'occhiata a un esempio di come creare una finestra modale semplice utilizzando jQuery e CSS. La particolarità di questo esempio è che non è richiesto qui, beh, ad eccezione della libreria jQuery stessa.
Inserisci il codice modale nella pagina:
chiudere
Apri finestra modale
Come puoi vedere dal markup, il blocco della finestra modale stessa è un div con un id = attributo forma_modale che contiene un elemento span con id = modal_close... Questo elemento servirà come pulsante per chiudere la finestra modale, inoltre, sotto il blocco c'è un div con l'attributo id = sovrapposizione, che serve allo stesso tempo a scurire lo sfondo. La finestra modale si aprirà per riferimento, con la classe modale.
Per forma_modale abbiamo impostato una larghezza e un'altezza fisse e quindi abbiamo centrato la posizione al centro dello schermo. Per un sottofondo modale ( sovrapposizione) impostiamo la dimensione alla larghezza dello schermo, riempiamo con trasparenza e la nascondiamo anche per impostazione predefinita. Un momento speciale con z-index, il modale dovrebbe avere il più grande di tutti gli elementi sulla pagina e la copertina dovrebbe avere il più grande di tutti tranne il modale stesso.
Ora al più elementare, questo è il codice javascript. Per la finestra modale verranno utilizzati due eventi principali, questa è la sua apertura - facendo clic su un elemento con la classe modale, nel nostro caso questo è un collegamento, e la chiusura della finestra modale è un clic sulla copertina ( sovrapposizione), oppure fare clic sul pulsante di chiusura, nel nostro caso è un elemento span con id = modal_close.
$ (document) .ready (function () ($ (". modal"). click (function (event) (event.preventDefault (); $ ("# overlay"). fadeIn (400, // anima che mostra la copertina function() (// quindi mostra la finestra mod. $ ("# modal_form") .css ("display", "block") .animate ((opacity: 1, top: "50%"), 200);) ); )); // chiudi la finestra modale $ ("# modal_close, #overlay"). click (function () ($ ("# modal_form") .animate ((opacity: 0, top: "45%") , 200, // riduce la funzione di opacità () (// dopo l'animazione $ (this) .css ("display", "none"); // nasconde la finestra $ ("# overlay"). fadeOut (400); / / nascondi il vassoio) );));));
Con Anima cambiamo la posizione verticale superiore, così come la trasparenza opacità, e con questo otteniamo un effetto interessante. Un effetto simile viene utilizzato sia quando la finestra è aperta che quando è chiusa. La differenza è che l'ordine di applicazione delle proprietà per i blocchi viene modificato, visualizzando così l'apertura e la chiusura della finestra.
3. Un esempio di finestra modale jQuery chiamata per riferimento (con Demo)
Molto probabilmente, hai già visto una finestra modale pop-up su Internet più di una volta: conferma della registrazione, avviso, informazioni di aiuto, download di file e molto altro. In questo tutorial, fornirò alcuni esempi di come creare le finestre modali di base.
Come creare un semplice popup modale
Iniziamo ad esaminare il codice della finestra modale più semplice che apparirà immediatamente codice jQuery
Incolla il codice ovunque in corpo La tua pagina. Subito dopo aver caricato la pagina, senza alcun comando, vedrai una finestra simile a questa:
Ma il codice seguente verrà eseguito dopo che l'intera pagina è stata caricata nel browser. Nel nostro esempio, dopo aver caricato la pagina con le immagini, apparirà una semplice finestra pop-up:
Chiama la finestra modale jQuery per riferimento con CSS
Il prossimo passo è creare finestra modale quando si fa clic sul collegamento. Lo sfondo si scurirà lentamente.
Spesso puoi vedere che i moduli di accesso e di registrazione si trovano in tali finestre. Andiamo al sodo
Per prima cosa scriviamo parte html... Inseriamo questo codice nel corpo del tuo documento.
Richiamo di una finestra modale
Testo modale
Chiudere
Il testo nella finestra modale.
Codice CSS... O in un file CSS separato o in
Nel codice jQuery, ci concentreremo sulla posizione del modale e della maschera, in questo caso oscurando gradualmente lo sfondo.
Attenzione! Non dimenticare di includere la libreria in testa al documento!
Collegamento della libreria dal sito web di Google. Bene, il codice jQuery stesso.
Codice JQuery
I modali sono parte integrante del moderno web design, con l'aiuto di essi, lo sviluppatore può ricorrere al metodo del loop su una pagina e non gettare il visitatore su pagine secondarie. In questo tutorial, daremo un'occhiata a come creare fantastiche modalità di sfondo sfocato per il tuo sito Web utilizzando jQuery e CSS3. Grazie a queste regole, creeremo uno sfondo sfocato quando apparirà una finestra, che legherà lo sguardo del visitatore solo alle informazioni necessarie sul sito.
CSS3 Sfondo sfocato modali
Le migliori notizie economiche sono solo qui: Drobakha
L'animazione della finestra sarà impostata in modo tale che quando si fa clic sul pulsante dell'aspetto, la finestra si animerà dall'alto verso il basso, mentre la sfocatura dello sfondo verrà automaticamente migliorata.
Passaggio 1. HTML
Avremo un contenitore che conterrà: titolo, descrizione, quindi aggiungeremo una classe per un pulsante con una classe toggleModal per aprire una finestra modale:
Intestazione
Descrizione
Titolo per la finestra
Le schede sono una cosa molto interessante e utile durante la creazione di un sito Web, ti consentono di organizzare correttamente le informazioni, risparmiando un po' di spazio sul sito.
Quindi dobbiamo aggiungere una classe modale è attivo, questa classe sarà responsabile della chiamata alla finestra modale, modal__header responsabile del titolo e dello stile della finestra.
Passaggio 2. CSS
Adesso passiamo allo styling, il primo passo sarà la classe pulsante, che sarà responsabile, hai indovinato, per i pulsanti sul sito, impostiamo i parametri di visualizzazione corretti per questo:
Gli stili sono abbastanza semplici, sono archiviati in un file separato e non dovrebbero causare difficoltà durante la modifica per uno sviluppatore che abbia mai incontrato CSS.
Passaggio 3. JS
Il nostro ultimo, ma non meno importante, sarà l'impostazione della sfocatura automatica dello sfondo quando appare il menu, così come la cliccabilità dei link, con queste piccole regole ci aiuterà Js:
Esempi di funzione jQuery setTimeout () Javascript impedisce a più timer di eseguire setinterval contemporaneamente
Circuiti radioamatori fai da te e prodotti fatti in casa
Ritaglia il testo su una o più righe in altezza con l'aggiunta di ellissi Aggiunta di una sfumatura al testo