Excitation de boîte de dialogue personnalisée

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 :

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 :

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.

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

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!