API Popover Baharu: Popover Mudah Tanpa JavaScript

API Popover memudahkan penciptaan popover, menghapuskan keperluan untuk perpustakaan JavaScript atau pengekodan manual. Disokong merentas penyemak imbas utama, ia amat mudah untuk dilaksanakan.

Memahami Popover API

Standard baharu ini memperkemas proses memaparkan popover, pengendalian pembukaan, penutupan dan pertimbangan kebolehaksesan secara automatik. Pembangun tidak perlu lagi mengurus negeri ini secara bebas.

Mencipta Popover

Pelaksanaan Asas

Berikut ialah cara untuk mencipta popover asas:

1. Buat butang dalam HTML anda untuk mencetuskan popover.
2. Gunakan atribut popover-target pada butang, memautkannya ke elemen melalui ID kongsi (mis., popover).
3. Gunakan atribut popover pada elemen HTML yang anda mahu gunakan sebagai popover, menggunakan ID yang sama.

Itu sahaja yang diperlukan! Mengklik butang membuka popover, dan ia ditutup secara automatik apabila anda mengklik di luar (abaikan ringan). Fungsi togol ini ialah gelagat lalai.

Menambah Butang Tutup

Anda boleh menambah butang tutup dalam popover. Berikan butang ini atribut popover-target yang sesuai dan tentukan tindakan hide dengan jelas. Sedikit CSS akan meningkatkan penampilannya.

Mod Popover

Popovers lalai kepada mod "auto":

1. Membuka popover menutup mana-mana yang lain yang terbuka.
2. Penyingkiran ringan didayakan.

Bertukar kepada mod "manual" menghalang penutupan automatik popover lain dan melumpuhkan pelepasan cahaya. Anda perlu mengurus pembukaan dan penutup popover secara eksplisit.

Menggayakan Popovers

Menggunakan Elemen Tirai Latar

Elemen backdrop amat berguna; ia menindih seluruh halaman apabila popover dibuka.

[popover] {
    background: white;
    border: 1px solid #ccc;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    padding: 16px;
    max-width: 300px;
}

/* ... other CSS ... */

Ini membolehkan penggayaan latar belakang yang mudah untuk menumpukan perhatian pada popover.

Popover lwn. Modal

Adalah penting untuk memahami bahawa popover adalah bukan modal:

1. Popovers tidak melumpuhkan interaksi dengan seluruh halaman.
2. Anda masih boleh mengklik elemen lain semasa popover dibuka.

Untuk modal yang memerlukan interaksi pengguna sebelum meneruskan, gunakan dialog.showModal() sebaliknya. Ini memerlukan sedikit JavaScript, tetapi ia menyediakan kefungsian modal sebenar.

Mempertingkatkan Penggayaan Popover

Menggunakan Elemen Dialog

Atribut popover itu sendiri bukan semantik, membolehkan anda menggunakan elemen HTML <dialog> untuk popover anda.

Menambah Lebih Banyak Kandungan dan Menggunakan CSS

Menambah lebih banyak kandungan (butang, dll.) dan penggayaan dengan CSS (keluarga fon, padding, warna, dll.) meningkatkan lagi penampilan popover. Contoh menunjukkan cara menggayakan butang utama untuk penampilan yang lebih berkilau.

Menggunakan JavaScript dengan Popover

Walaupun API memudahkan penciptaan popover tanpa JavaScript, anda masih boleh menggunakan JavaScript untuk kawalan yang lebih maju (cth., showPopover).

Kesimpulan

API Popover menawarkan pendekatan yang diperkemas untuk mencipta popover yang elegan dan boleh diakses dengan kod minimum. Maklum balas anda dialu-alukan! Pertimbangkan untuk menyukai atau mengikuti untuk lebih banyak kandungan seperti ini.

Ikuti saya di: LinkedIn | Sederhana | Bluesky

Atas ialah kandungan terperinci API Popover: Buat Pop-Up Asli dengan HTML—Tidak Perlu JavaScript. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!