Spannendes benutzerdefiniertes Dialogfeld

Natürlich müssen wir ein benutzerdefiniertes Dialogfeld haben! Wie lustig ist das?

Ich habe mir dieses Video für Interessierte angesehen und konnte den Prozess ziemlich einfach bewältigen.

Wie es gemacht wurde

Zuerst erstellen wir eine Struktur im HTML.
Wir können ein Overlay verwenden, um den Hintergrund auszublenden, wenn er auftaucht. Wir müssen auch eine Box mit mehr Elementen darin erstellen. Hier ist eine Möglichkeit, dies zu tun:

Beachten Sie auch die Schaltfläche, die mit einem Onclick-Ereignis hinzugefügt wurde.

---

Der lustige Teil

Fügen Sie Stile mit CSS hinzu, um Ihre neue Box anzupassen:

Es war sehr spannend, mein eigenes Dialogfeld zu erstellen. Ich liebe es, mit Knöpfen, Farben und Formen herumzuspielen. Ich bin sehr froh, dass ich mir die Zeit genommen habe, es herauszufinden. Es ist ein lustiges Miniprojekt!

---

Funktionalität einrichten

1. Erstellen Sie eine benutzerdefinierte Funktion, die das Dialogfeld bei einem Klick in JavaScript rendert.
2. Erstellen Sie Variablen, um die Größe zu definieren und über eine ID auf Elemente aus dem DOM zuzugreifen.
3. Sobald wir unsere Boxelemente erfasst haben, können wir unser angezeigtes Dialogfeld zentrieren, indem wir die Fensterbreite dividiert durch 2 als Referenz verwenden.

Dieses Dialogfeld besteht aus drei Bereichen, Sie können jedoch nach Bedarf Dinge hinzufügen oder entfernen. Die eigentliche Hürde ist hier die Funktion.

• Fügen Sie der Box dynamisch Informationen hinzu, indem Sie .innerHTML für jede eindeutige ID verwenden.
• this.render rendert die Informationen beim Klicken.
• alert.render wird bei einem Klick aufgerufen, was die benutzerdefinierteAlert-Funktion auslöst.

Die Funktion this.ok stellt sicher, dass die Überlagerung und das Dialogfeld entfernt werden, wenn auf die Schaltfläche im „Popup“-Feld geklickt wird. Das brauchen wir unbedingt. Dies erreichen Sie, indem Sie den Stil für beide auf „Keine“ setzen.

---

Großartig – Probieren Sie es aus

Es hat mir wirklich Spaß gemacht – und ich bin mal wieder bis spät in die Nacht wach geblieben. XD

Das obige ist der detaillierte Inhalt vonSpannendes benutzerdefiniertes Dialogfeld. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!