การเปลี่ยนแปลงกำลังจะเริ่มขึ้นแล้ว หนึ่งในฟีเจอร์ที่ฉันชื่นชอบมากที่สุดคือเบราว์เซอร์ที่ทันสมัยทั้งหมดและได้เป็นส่วนหนึ่งของ Baseline 2024 อย่างเป็นทางการแล้ว และฟีเจอร์นี้คือ Popover API Popover ช่วยสร้างอินเทอร์เฟซแบบเป็นชั้นๆ เช่น เคล็ดลับเครื่องมือ เมนู การสอน UI และอื่นๆ ได้เป็นจำนวนมากเพราะพื้นฐานและเอื้อต่อนักพัฒนาซอฟต์แวร์จำนวนมาก
ไฮไลต์สั้นๆ ของความสามารถในการแสดงหน้าต่างป็อปโอเวอร์มีดังนี้
- เลื่อนไปยังชั้นบนสุด ป๊อปอัปจะปรากฏในเลเยอร์บนสุดเหนือส่วนที่เหลือของหน้า คุณจึงไม่ต้องเล่นกับ
z-index
- ฟังก์ชันปิดไฟ การคลิกนอกบริเวณป๊อปอัปจะปิดป๊อปอัปและโฟกัสกลับ
- การจัดการโฟกัสเริ่มต้น การเปิดป็อปโอเวอร์จะทำให้แท็บถัดไปหยุดภายในป๊อปอัป
- แป้นพิมพ์ลัดที่เข้าถึงได้ การกดปุ่ม
esc
หรือสลับ 2 ครั้งจะเป็นการปิดป๊อปอัปและโฟกัสกลับไปที่ - การเชื่อมโยงคอมโพเนนต์ที่เข้าถึงได้ การเชื่อมต่อองค์ประกอบป๊อปโอเวอร์กับทริกเกอร์ป๊อปโอเวอร์อย่างมีความหมาย
กำลังสร้างป๊อปอัป
การสร้างป๊อปอัปนั้นค่อนข้างตรงไปตรงมา หากต้องการใช้ค่าเริ่มต้น สิ่งที่คุณต้องมีคือ button
เพื่อทริกเกอร์ป๊อปอัปและองค์ประกอบที่จะทริกเกอร์
- ก่อนอื่นให้ตั้งค่าแอตทริบิวต์
popover
ในองค์ประกอบซึ่งจะเป็นป๊อปอัป - จากนั้นเพิ่ม
id
ที่ไม่ซ้ำกันในองค์ประกอบที่แสดงขึ้น - สุดท้าย หากต้องการเชื่อมต่อปุ่มกับป๊อปอัป ให้ตั้งค่า
popovertarget
ของปุ่มเป็นค่าid
ขององค์ประกอบป๊อปอัป
ซึ่งจะแสดงในรหัสต่อไปนี้
<button popovertarget="my-popover">Open Popover</button>
<div id="my-popover" popover>
<p><p>I am a popover with more information. Hit <kbd>esc</kbd> or click away to close me.<p></p>
</div>
หากต้องการควบคุมหน้าต่างป็อปโอเวอร์ที่ละเอียดขึ้น คุณสามารถตั้งค่าประเภทของป๊อปอัปที่ชัดเจนได้ เช่น การใช้แอตทริบิวต์ popover
เปล่าที่ไม่มีค่าจะเหมือนกับ popover="auto"
ค่า auto
เปิดใช้ลักษณะการทำงานแบบปิดแสงและปิดป๊อปอัปอื่นๆ โดยอัตโนมัติ ใช้ popover="manual"
และคุณจะต้องเพิ่มปุ่มปิด ป๊อปอัปที่กำหนดเองจะไม่ปิดป๊อปอัปอื่นๆ หรืออนุญาตให้ผู้ใช้ปิดป๊อปอัปโดยการคลิกออกจากหน้าใน UI คุณสร้างหน้าต่างป๊อบโอเวอร์ด้วยตนเองโดยใช้ข้อมูลต่อไปนี้
<button popovertarget="my-popover" class="trigger-btn"> Open Popover </button>
<div id="my-popover" popover=manual>
<p>I am a popover with more information. Hit the close button or toggle to close me.<p>
<button class="close-btn" popovertarget="my-popover" popovertargetaction="hide">
<span aria-hidden="true">❌</span>
<span class="sr-only">Close</span>
</button>
</div>
กล่องโต้ตอบป๊อปอัปกับกล่องโต้ตอบแบบโมดัล
คุณอาจสงสัยว่าคุณต้องเปิดป๊อปอัปเมื่อมีกล่องโต้ตอบหรือไม่ และคำตอบคือคุณอาจไม่ต้องเปิด
โปรดทราบว่าแอตทริบิวต์ป๊อปอัปไม่ได้แสดงความหมายในตัว และแม้ว่าคุณจะสามารถสร้างประสบการณ์ที่เหมือนกับกล่องโต้ตอบโมดัลโดยใช้การแสดงแบบป๊อปอัปได้แล้ว แต่ก็มีความแตกต่างที่สำคัญอยู่บ้างระหว่าง 2 แบบ ดังนี้
องค์ประกอบ <dialog>
แบบโมดัล
- เปิดด้วย
dialog.showModal()
- ปิดด้วย
dialog.close()
- ทำให้ส่วนที่เหลือของหน้าดูเฉื่อยชา
- ไม่รองรับลักษณะการทำงานแบบปิดไฟ
- คุณจัดรูปแบบสถานะเปิดได้ด้วยแอตทริบิวต์
[open]
- สื่อถึงคอมโพเนนต์แบบอินเทอร์แอกทีฟที่บล็อกการโต้ตอบกับส่วนที่เหลือของหน้า
แอตทริบิวต์ [popover]
- เปิดได้ด้วยผู้เรียกใช้แบบประกาศ (
popovertarget
) - ปิดด้วย
popovertarget
(เปิดใหม่โดยอัตโนมัติ) หรือpopovertargetaction=hide
(เปิดใหม่ด้วยตนเอง) - ไม่ทำให้หน้าที่เหลือเฉื่อย
- รองรับลักษณะการทำงานแบบปิดไฟ
- คุณจัดรูปแบบสถานะเปิดได้ด้วยคลาส Pseudo-class
:popover-open
- ไม่มีความหมายในตัว
invoketarget
สรุปและอ่านเพิ่มเติม
แพลตฟอร์มนี้มีฟีเจอร์ที่น่าสนใจมากมายที่ popover
หากต้องการดูข้อมูลเพิ่มเติมเกี่ยวกับ API นี้ รวมถึงข้อมูลเพิ่มเติมเกี่ยวกับความสามารถเข้าถึงได้ง่ายของฟีเจอร์ และเอกสารเกี่ยวกับชุดฟีเจอร์ โปรดอ่านคำแนะนำบางส่วนต่อไปนี้เพื่อศึกษาข้อมูลเพิ่มเติม