JavaScript popup un élément div au centre de la page Web
Ce blog expliquera les méthodes pour faire apparaître un élément div au centre de la page Web en JavaScript.
Comment figurer un élément div au centre de la page Web en JavaScript?
Pour faire apparaître un élément div au centre de la page Web en JavaScript, les méthodes suivantes peuvent être appliquées:
- "document.QuerySelector ()" Méthode
- "document.getElementByid ()" Méthode
- "Jquery"
Les approches mentionnées seront démontrées une par une!
Méthode 1: apparaître un élément div au centre de la page Web en javascript à l'aide du document.Méthode QueySelector ()
Le "document.QuerySelector ()»La méthode récupère le premier élément qui correspond au sélecteur CSS correspondant. Cette méthode peut être utilisée pour accéder au «div»Élément pour accéder aux fonctionnalités correspondantes et les afficher.
Syntaxe
document.QueySelector (sélecteurs CSS)Ici, les sélecteurs CSS se réfèrent à «div», Qui sera accessible.
L'exemple suivant explique le concept déclaré.
Exemple
Tout d'abord, attribuez le spécifié "classe" et "identifiant"À l'élément div ajouté. Pour le pop-up, affectez la classe nommée «surgir”À l'élément div. Ensuite, incluez une rubrique spécifiée dans le «”Tag et boutons séparés pour ouvrir et fermer le pop-up. Attache également un «sur clic»Événement sur les deux boutons invoquant les fonctions spécifiées:
Ceci est un élément div pop-up centré
Après cela, déclarez une fonction nommée «Opendiv ()"Pour récupérer le"div»Élément en passant son identifiant dans le«document.QuerySelector ()«Méthode et définissez son affichage comme«bloc«Pour démarrer le bloc sur une nouvelle ligne et prendre la largeur de l'écran:
fonction opendiv ()Let Get = Documer.queySelector ('# div')
obtenir.style.affichage = 'bloc'
De même, définissez le «closev ()«Fonctionne et répétez les étapes ci-dessus pour fermer la fenêtre contextuelle en spécifiant«aucun”Comme valeur de la propriété d'affichage:
fonction closev ()Let Get = Documer.queySelector ('# div')
obtenir.style.affiche = 'Aucun'
Enfin, stylisez les divs ajoutés en fonction de vos exigences:
On peut voir que lorsque le «Montrer la popup«Le bouton est cliqué, un nouvel élément div est apparu au centre de la page Web:
Méthode 2: Papup un élément div au centre de la page Web en javascript à l'aide du document.Méthode GetElementById ()
Le "document.getElementByid ()»La méthode obtient un élément avec l'ID spécifié. Cette méthode peut être implémentée pour accéder à l'ID spécifié pour l'ouverture et la fermeture de la fenêtre contextuelle créée.
Syntaxe
document.GetElementByid (EleMedId)Dans la syntaxe donnée, "élémentID"Indique l'ID de l'élément particulier qui doit être récupéré.
Exemple
Premièrement, ajoutez deux divs comme nous l'avons fait précédemment. Ensuite, incluez une image et spécifiez son chemin avec ses dimensions à contenir dans la fenêtre contextuelle. Après cela, incluez les boutons suivants avec un «sur clic»Événement comme discuté dans la méthode précédente:
Maintenant, dans les méthodes Opendiv () et Closev (), utilisez le document.Méthode getElementById () pour accéder à la div requise et définir sa valeur de propriété d'affichage en conséquence:
fonction opendiv ()Let Get = Documer.getElementByid ('div')
obtenir.style.affichage = 'bloc'
fonction closev ()
Let Get = Documer.getElementByid ('div')
obtenir.style.affiche = 'Aucun'
Enfin, stylisez votre page Web conformément à vos exigences:
Sortir
Méthode 3: Papup un élément div au centre de la page Web en JavaScript à l'aide de jQuery
Dans cette méthode particulière, nous implémenterons la tâche requise en appliquant «jquery”Ainsi que ses méthodes pour montrer et cacher la fenêtre contextuelle créée.
L'exemple suivant illustre le concept déclaré.
Exemple
Tout d'abord, incluez le «jquery»Bibliothèque dans la balise de script:
De même, attribuez la classe et l'identifiant suivants au «div”Élément pour le document global et la fenêtre contextuelle respectivement. Ensuite, incluez le paragraphe suivant dans la fenêtre contextuelle. Répétez également les méthodes discutées pour inclure les boutons invoquant les fonctions spécifiées lors du déclenchement du «sur clic" événement:
Les pages Web ou les sites que vous visitez permettent souvent à l'utilisateur attendre d'afficher un message important ou un avertissement avant d'accéder à la page particulière. Par exemple, demander à un utilisateur d'acheter l'adhésion ou se connecter avant d'accéder au contenu du site. En plus de cela, la gestion appropriée du trafic dans le cas des sites Web éducatifs
Montrer la popup
Maintenant, créez une fonction nommée «Opendiv ()"Cela accédera au divrecouvrir”ID et appliquez le«montrer()”Méthode afin d'afficher la fenêtre contextuelle créée:
fonction opendiv ()$ ('# struct').montrer();
Pour fermer la fenêtre contextuelle, définissez la fonction nommée «closev ()»Et dans sa définition de fonction, invoquez le«cacher()”Méthode sur l'ID accessible pour fermer la fenêtre contextuelle:
fonction closev ()$ ('# struct').cacher();
Enfin, stylisez votre élément de page Web en conséquence:
Sortir
Nous avons discuté de diverses méthodes créatives pour apparaître un élément div au centre de la page Web en JavaScript.
Conclusion
Pour faire éclater un élément div au centre de la page Web en JavaScript, appliquez le «document.QuerySelector ()«Méthode ou le«document.getElementByid ()”Méthode pour récupérer la div créée en utilisant son identifiant pour le faire apparaître. De plus, vous pouvez également utiliser le «jquery»Bibliothèque pour inclure un élément div sous la forme d'une fenêtre contextuelle en appliquant ses méthodes intégrées. Ce blog a démontré les méthodes qui peuvent être appliquées pour faire apparaître un élément div au centre de la page Web en JavaScript.