Keseronokan Kotak Dialog Tersuai

Sudah tentu kita perlu mempunyai kotak dialog tersuai! Betapa seronoknya?

Saya menonton video ini untuk mereka yang berminat dan dapat mengendalikan proses dengan agak mudah.

Bagaimana ia dilakukan

Pertama, kami mencipta struktur dalam html.
Kita boleh menggunakan tindanan untuk menyekat latar belakang apabila ia muncul. Kita juga perlu mencipta kotak dengan lebih banyak elemen di dalamnya. Berikut ialah cara untuk melakukannya:

Juga perhatikan butang yang telah ditambahkan dengan acara onclick.

---

Bahagian yang menyeronokkan

Tambah penggayaan dengan CSS untuk menyesuaikan kotak baharu anda:

Ia sangat menarik untuk mencipta kotak dialog saya sendiri. Saya suka bermain-main dengan butang, warna dan bentuk. Saya sangat gembira saya meluangkan masa untuk memikirkannya. Ia adalah projek mini yang menyeronokkan!

---

Sediakan Kefungsian

1. Buat fungsi tersuai yang menjadikan kotak dialog onclick dalam JavaScript.
2. Buat pembolehubah untuk mentakrifkan saiz dan akses elemen daripada DOM menggunakan ID.
3. Setelah kami mengambil elemen kotak kami, kami boleh memusatkan kotak dialog kami yang muncul dengan menggunakan lebar tetingkap sebagai rujukan, dibahagikan dengan 2.

Kotak dialog ini mempunyai tiga kawasan, tetapi anda boleh menambah atau menolak perkara mengikut keperluan. Halangan sebenar di sini ialah fungsi.

• Tambah maklumat pada kotak secara dinamik dengan menggunakan .innerHTML pada setiap ID unik.
• this.render akan memberikan maklumat onclick.
• alert.render dipanggil onclick yang mencetuskan fungsi customAlert.

Fungsi this.ok memastikan tindanan dan kotak dialog dialih keluar apabila butang dalam kotak "pop timbul" diklik. Kami pasti memerlukannya. Ini dilakukan dengan menetapkan gaya pada kedua-duanya kepada tiada.

---

Kehebatan - Cubalah

Saya benar-benar seronok melakukan ini - dan berjaga sehingga lewat - sekali lagi. XD

Atas ialah kandungan terperinci Keseronokan Kotak Dialog Tersuai. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!