Excitation de boîte de dialogue personnalisée-js tutoriel-php.cn

Excitation de boîte de dialogue personnalisée

PHPz

Libérer： 2024-08-22 18:52:37

original

802 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é

Créez une fonction personnalisée qui affiche la boîte de dialogue en un clic en JavaScript.
Créez des variables pour définir la taille et accéder aux éléments du DOM à l'aide d'un ID.
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.