Maison > interface Web > js tutoriel > Excitation de boîte de dialogue personnalisée

Excitation de boîte de dialogue personnalisée

PHPz
Libérer: 2024-08-22 18:52:37
original
817 Les gens l'ont consulté

Bien sûr, nous devons avoir une boîte de dialogue personnalisée ! Est-ce que c'est amusant ?

J'ai regardé cette vidéo pour ceux qui sont intéressés et j'ai pu gérer le processus assez facilement.

Comment cela a été fait

Tout d'abord, nous créons une structure en HTML.
Nous pouvons utiliser une superposition pour bloquer l'arrière-plan lorsqu'il apparaît. Nous devons également créer une boîte contenant plus d’éléments. Voici une façon de procéder :

Custom Dialog Box Excitement

Remarquez également le bouton qui a été ajouté avec un événement onclick.



La partie amusante

Ajoutez du style avec CSS pour personnaliser votre nouvelle boîte :

Custom Dialog Box Excitement


C'était très excitant de créer ma propre boîte de dialogue. J'adore jouer avec les boutons, les couleurs et les formes. Je suis très heureux d'avoir pris le temps de comprendre. C'est un mini-projet amusant !


Configurer la fonctionnalité

  1. Créez une fonction personnalisée qui affiche la boîte de dialogue en un clic en JavaScript.
  2. Créez des variables pour définir la taille et accéder aux éléments du DOM à l'aide d'un ID.
  3. Une fois que nous avons récupéré les éléments de notre boîte, nous pouvons centrer notre boîte de dialogue qui apparaît en utilisant la largeur de la fenêtre comme référence, divisée par 2.

Cette boîte de dialogue comporte trois zones, mais vous pouvez ajouter ou soustraire des éléments selon vos besoins. Le véritable obstacle ici est la fonction.

  • Ajoutez des informations à la boîte de manière dynamique en utilisant .innerHTML sur chaque identifiant unique.
  • this.render restituera les informations en un clic.
  • alert.render est invoqué lors d'un clic, ce qui déclenche la fonction customAlert.

Custom Dialog Box Excitement

La fonction this.ok garantit que la superposition et la boîte de dialogue sont supprimées lorsque vous cliquez sur le bouton dans la boîte "pop-up". Nous en avons absolument besoin. Cela se fait en définissant le style des deux sur aucun.


Génial – Essayez-le

Custom Dialog Box Excitement

Je me suis vraiment amusé à faire ça - et je suis resté éveillé tard - encore une fois. XD

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

source:dev.to
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal