JavaScript popup et divelement i midten av websiden

I prosessen med å lage nettsteder med ekstra funksjonaliteter, er det forskjellige krav for å gjøre en webside generelt attraktiv for å få brukerens oppmerksomhet. For eksempel å vise en viktig melding eller varsle brukeren om en advarsel eller varsel. I slike scenarier er det en hendig funksjon i midten av websiden ved hjelp av JavaScript.

Denne bloggen vil forklare metodene for å dukke opp et divelement på websidenes senter i JavaScript.

Hvordan du kan popup et divelement i midten av websiden i JavaScript?

For å dukke opp et divelement på websidenes senter i JavaScript, kan følgende metoder brukes:

• “dokument.QuerySelector ()”Metode
• “dokument.getElementById ()”Metode
• “JQuery”

De nevnte tilnærmingene vil bli demonstrert en etter en!

Metode 1: Popup et divelement på websidenes senter i JavaScript ved hjelp av dokumentet.QuerySelector () -metode

“dokument.QuerySelector ()”Metode henter det første elementet som samsvarer med den tilsvarende CSS -velgeren. Denne metoden kan brukes for å få tilgang til “div”Element for å få tilgang til de tilsvarende funksjonalitetene og vise dem.

Syntaks

dokument.QuerySelector (CSS Selectors)

Her refererer CSS -velgere til “div”, Som vil få tilgang til.

Følgende eksempel forklarer det uttalte konseptet.

Eksempel
For det første, tilordne den spesifiserte “klasse”Og“id”Til det ekstra divelementet. For pop-up, tilordne klassen som heter “popup”Til Div -elementet. Inkluder deretter en overskrift som er spesifisert i "

”Tag og separate knapper for åpning og lukking av pop-up. Fest også en "ved trykk”Hendelse til begge knappene som påkaller de spesifiserte funksjonene:

Dette er et sentrert pop-up divelement

Lukk popup

Vis popup

Etter det, erklærer en funksjon som heter “OpenDiv ()”For å hente“div”Element ved å gi sin ID i“dokument.QuerySelector ()”Metode og angi displayet som“blokkere”For å starte blokken på en ny linje og ta opp skjermbredden:

funksjon openDiv ()
La få = dokument.QuerySelector ('#div')
få.stil.display = 'blokk'

Tilsvarende definer "lukket ()”Funksjon og gjenta trinnene ovenfor for å lukke popup -en ved å spesifisere“ingen”Som visningsegenskapsverdi:

funksjon stengt ()
La få = dokument.QuerySelector ('#div')
få.stil.display = 'ingen'

Sist, stil de ekstra divene i henhold til dine krav:

Det kan sees at når "Vis popup”-Knappen klikker, et nytt DIV -element dukker opp i midten av websiden:

Metode 2: Popup et divelement på websidenes senter i JavaScript ved hjelp av dokument.getElementById () -metode

“dokument.getElementById ()”Metoden får et element med den spesifiserte IDen. Denne metoden kan implementeres for å få tilgang til den spesifiserte IDen for åpning og lukking av den opprettede popup -en.

Syntaks

dokument.getElementById (ElementId)

I den gitte syntaksen, “ElementId”Angir ID for det aktuelle elementet som må hentes.

Eksempel
For det første, legg til to div som vi gjorde tidligere. Inkluder deretter et bilde og spesifiser banen sammen med dimensjonene som skal inneholdes i popup -en. Etter det, inkludere følgende knapper sammen med en “ved trykk”Hendelse som diskutert i forrige metode:

Lukk popup

Vis popup

Nå, i OpenDiv () og ClosedIV () -metodene, bruker du dokumentet.getElementById () -metode for tilgang til den nødvendige DIV og angi visningsegenskapsverdien deretter:

funksjon openDiv ()
La få = dokument.getElementById ('Div')
få.stil.display = 'blokk'

funksjon stengt ()
La få = dokument.getElementById ('Div')
få.stil.display = 'ingen'

Til slutt, stil på websiden din i henhold til dine krav:

Produksjon

Metode 3: Popup et divelement på websidenes senter i JavaScript ved hjelp av jQuery

I denne spesielle metoden vil vi implementere den nødvendige oppgaven ved å anvende “jQuery”Sammen med metodene for å vise og skjule den skapte popup -en.

Følgende eksempel illustrerer det uttalte konseptet.

Eksempel
Først må du ta med "jQuery”Bibliotek i skriptetoden:

På samme måte, tilordne følgende klasse og ID til "div”Element for henholdsvis det samlede dokumentet og popup -en. Inkluder deretter følgende avsnitt i popup -en. Gjenta også de diskuterte metodene for å inkludere knappene som påkaller de spesifiserte funksjonene når du utløser "ved trykk" begivenhet:

Nettsidene eller nettstedene du besøker lar brukeren ofte vente på å vise en viktig melding eller en advarsel før du får tilgang til den aktuelle siden. For eksempel å be en bruker om å kjøpe medlemskap eller pålogging før du får tilgang til nettstedets innhold. I tillegg til det, er passende styring av trafikk når det gjelder utdanningsnettsteder

Vis popup

Lag nå en funksjon som heter “OpenDiv ()”Det vil få tilgang til diven som har“overlegg”Id og bruk“forestilling()”Metode for å vise den opprettede popup:

funksjon openDiv ()
$ ('#struct').forestilling();

For å lukke popup -en, definer du funksjonen som heter “lukket ()”Og i sin funksjonsdefinisjon, påkalle“gjemme seg()”Metode på den tilgjengelige IDen for å lukke popup:

funksjon stengt ()
$ ('#struct').gjemme seg();

Til slutt, stil websideelementet ditt deretter:

Produksjon

Vi har diskutert forskjellige kreative metoder for å dukke opp et divelement i midten av websiden i JavaScript.

Konklusjon

For å popup et divelement i midten av websiden i JavaScript, bruk "dokument.QuerySelector ()”Metode eller“dokument.getElementById ()”Metode for å hente den opprettede div ved hjelp av IDen sin til å dukke den opp. Dessuten kan du også bruke "jQuery”Bibliotek for å inkludere et divelement i form av en popup ved å bruke sine innebygde metoder. Denne bloggen demonstrerte metodene som kan brukes til å dukke opp et divelement på websidenes senter i JavaScript.