Javascript popup un elemento div al centro della pagina web
Questo blog spiegherà i metodi per visualizzare un elemento div al centro della pagina web in javascript.
Come aprire un elemento div al centro della pagina web in javascript?
Per visualizzare un elemento Div presso il centro della pagina Web in JavaScript, è possibile applicare i seguenti metodi:
- "documento.QuerySelector ()" Metodo
- "documento.getElementById ()" Metodo
- "JQuery"
Gli approcci menzionati saranno dimostrati uno per uno!
Metodo 1: popup un elemento div al centro della pagina web in javascript utilizzando il documento.Metodo QuerySelector ()
IL "documento.QuerySelector ()"Il metodo prende il primo elemento che corrisponde al selettore CSS corrispondente. Questo metodo può essere utilizzato per accedere al "div"Elemento per accedere alle funzionalità corrispondenti e visualizzarle.
Sintassi
documento.QuerySelector (selettori CSS)Qui, i selettori CSS si riferiscono a "div", A cui si accede.
Il seguente esempio spiega il concetto dichiarato.
Esempio
In primo luogo, assegnare il specificato "classe" E "id"All'elemento Div aggiunto. Per il pop-up, assegna la classe denominata "apparire"All'elemento Div. Quindi, includi un'intestazione specificata in ""Tag e pulsanti separati per l'apertura e la chiusura del pop-up. Allegare anche un "al clic"Evento di entrambi i pulsanti che invocano le funzioni specificate:
Questo è un elemento div-div centrato
Dopodiché, dichiara una funzione chiamata "Opendiv ()"Per prendere il"div"Elemento passando il suo ID in"documento.QuerySelector ()"Metodo e imposta il suo display come"bloccare"Per avviare il blocco su una nuova riga e prendere la larghezza dello schermo:
funzione opendiv ()Sia get = document.QuerySelector ('#Div')
Ottenere.stile.display = 'blocco'
Allo stesso modo, definisci il "chiusura ()"Funzionare e ripetere i passaggi sopra per chiudere il popup specificando"nessuno"Come valore della proprietà display:
funzione chiusev ()Sia get = document.QuerySelector ('#Div')
Ottenere.stile.display = 'nessuno'
Infine, stile i Div aggiunti in base alle tue esigenze:
Si può vedere che quando il "Mostra popup"Il pulsante viene cliccato, un nuovo elemento Div viene visualizzato al centro della pagina Web:
Metodo 2: popup un elemento Div presso il Centro della pagina Web in JavaScript usando il documento.metodo getElementById ()
IL "documento.getElementById ()"Il metodo ottiene un elemento con l'ID specificato. Questo metodo può essere implementato per accedere all'ID specificato per l'apertura e la chiusura del popup creato.
Sintassi
documento.getElementByID (elementID)Nella sintassi data, "Elementid"Indica l'ID del particolare elemento che deve essere recuperato.
Esempio
In primo luogo, aggiungi due div come abbiamo fatto in precedenza. Quindi, includi un'immagine e specifica il suo percorso insieme alle sue dimensioni da contenere nel popup. Successivamente, includi i seguenti pulsanti insieme a un "al clic"Evento come discusso nel metodo precedente:
Ora, nei metodi Opendiv () e chiusure (), utilizza il documento.Metodo getElementById () per accedere al Div richiesto e impostare il valore della proprietà di visualizzazione di conseguenza:
funzione opendiv ()Sia get = document.getElementById ('Div')
Ottenere.stile.display = 'blocco'
funzione chiusev ()
Sia get = document.getElementById ('Div')
Ottenere.stile.display = 'nessuno'
Infine, stile della tua pagina web secondo le tue esigenze:
Produzione
Metodo 3: popup un elemento div al centro della pagina web in javascript usando jQuery
In questo particolare metodo, implementeremo l'attività richiesta applicando "jQuery"Insieme ai suoi metodi per mostrare e nascondere il popup creato.
Il seguente esempio illustra il concetto dichiarato.
Esempio
Innanzitutto, includi il "jQuery"Libreria nel tag script:
Allo stesso modo, assegna la seguente classe e ID al "div"Elemento per il documento complessivo e il popup rispettivamente. Quindi, includi il seguente paragrafo all'interno del popup. Inoltre, ripeti i metodi discussi per includere i pulsanti che invocano le funzioni specificate al momento dell'attivazione del "al clic"Evento:
Le pagine Web o i siti visitati spesso lasciano che l'utente attenda di visualizzare un messaggio importante o un avviso prima di accedere alla pagina particolare. Ad esempio, chiedere a un utente di acquistare l'adesione o l'accesso prima di accedere al contenuto del sito. Inoltre, un'adeguata gestione del traffico nel caso dei siti Web educativi
Mostra popup
Ora, crea una funzione chiamata "Opendiv ()"Che accederà al div con"overlay"ID e applicare il"spettacolo()"Metodo per visualizzare il popup creato:
funzione opendiv ()$ ('#struct').spettacolo();
Per chiudere il popup, definire la funzione denominata "chiusura ()"E nella sua definizione della funzione, invoca il"nascondere()"Metodo sull'ID accessibile per chiudere il popup:
funzione chiusev ()$ ('#struct').nascondere();
Infine, modella di conseguenza l'elemento della tua pagina web:
Produzione
Abbiamo discusso di vari metodi creativi per visualizzare un elemento div al centro della pagina web in JavaScript.
Conclusione
Per aprire un elemento Div al centro della pagina web in JavaScript, applicare il “documento.QuerySelector ()Metodo o il "documento.getElementById ()"Metodo per recuperare il div creato usando il suo ID per farla esplodere. Inoltre, puoi anche utilizzare il "jQuery"Libreria per includere un elemento Div sotto forma di un popup applicando i suoi metodi integrati. Questo blog ha dimostrato i metodi che possono essere applicati per far apparire un elemento Div presso il Centro della pagina Web in JavaScript.