ป๊อปอัปมีอยู่ทุกที่บนเว็บ คุณสามารถดูข้อมูลเหล่านี้ได้ในเมนู เคล็ดลับการเปิด/ปิด และกล่องโต้ตอบ ซึ่งสามารถแสดงเป็นการตั้งค่าบัญชี วิดเจ็ตการเปิดเผยข้อมูล และตัวอย่างการ์ดผลิตภัณฑ์ แม้ว่าองค์ประกอบเหล่านี้จะแพร่หลายเพียงใด แต่การสร้างองค์ประกอบดังกล่าวในเบราว์เซอร์ยังคงมีความยุ่งยากอย่างไม่น่าเชื่อ คุณต้องเพิ่มการเขียนสคริปต์เพื่อจัดการโฟกัส สถานะเปิด และการปิด ฮุกที่เข้าถึงได้ในคอมโพเนนต์ การเชื่อมโยงแป้นพิมพ์เพื่อเข้าและออกจากประสบการณ์ และทั้งหมดนี้ก็คือก่อนที่คุณจะเริ่มสร้างฟังก์ชันหลักที่มีประโยชน์ ไม่ซ้ำใคร ของหน้าต่างป็อปโอเวอร์ของคุณ
เพื่อแก้ไขปัญหานี้ HTML API แบบประกาศชุดใหม่สำหรับการสร้างป๊อปอัปจะพร้อมใช้งานในเบราว์เซอร์ โดยเริ่มด้วย popover
API ใน Chromium 114
แอตทริบิวต์ป๊อปอัป
แทนที่จะจัดการความซับซ้อนทั้งหมดด้วยตัวเอง คุณอาจให้เบราว์เซอร์จัดการได้ด้วยแอตทริบิวต์ popover
และชุดฟีเจอร์ต่อๆ ไป การสนับสนุนป๊อปอัป HTML:
- เลื่อนไปยังชั้นบนสุด ป๊อปโอเวอร์จะปรากฏบนเลเยอร์แยกต่างหากเหนือส่วนที่เหลือของหน้า คุณจึงไม่จำเป็นต้องเปลี่ยนหน้าด้วยดัชนี z
- ฟังก์ชันปิดไฟ การคลิกนอกบริเวณป๊อปอัปจะปิดป๊อปอัปและโฟกัสกลับ
- การจัดการโฟกัสเริ่มต้น การเปิดป็อปโอเวอร์จะทำให้แท็บถัดไปหยุดภายในป๊อปอัป
- แป้นพิมพ์ลัดที่เข้าถึงได้ การกดปุ่ม
esc
จะปิดป๊อปอัปและโฟกัสกลับ - การเชื่อมโยงคอมโพเนนต์ที่เข้าถึงได้ การเชื่อมต่อองค์ประกอบป๊อปโอเวอร์กับทริกเกอร์ป๊อปโอเวอร์อย่างมีความหมาย
คุณสามารถสร้างป๊อปอัปที่มีฟีเจอร์เหล่านี้ทั้งหมดโดยไม่ต้องใช้ JavaScript ได้แล้ว ป๊อปโอเวอร์พื้นฐานต้องใช้ 3 สิ่งต่อไปนี้
- แอตทริบิวต์
popover
ในองค์ประกอบที่มีป๊อปอัป id
ในองค์ประกอบที่มีป๊อปอัปpopovertarget
ที่มีค่าid
ของป๊อปอัปในองค์ประกอบที่เปิดป๊อปอัป
<button popovertarget="my-popover"> Open Popover </button>
<div id="my-popover" popover>
<p>I am a popover with more information.</p>
</div>
ตอนนี้คุณมีหน้าป็อปโอเวอร์พื้นฐานที่ใช้งานได้เต็มรูปแบบแล้ว
ซึ่งสามารถใช้เพื่อสื่อสารข้อมูลเพิ่มเติมหรือใช้เป็นวิดเจ็ตการเปิดเผยข้อมูล
ค่าเริ่มต้นและการลบล้าง
โดยค่าเริ่มต้น เช่น ในข้อมูลโค้ดก่อนหน้านี้ การตั้งค่าป๊อปอัปด้วย popovertarget
หมายความว่าปุ่มหรือองค์ประกอบที่เปิดป๊อปอัปจะสลับเป็นเปิดและปิด อย่างไรก็ตาม คุณสามารถสร้างป๊อปอัปที่ชัดเจนได้โดยใช้ popovertargetaction
ซึ่งจะลบล้างการทำงานสลับเริ่มต้น popovertargetaction
ตัวเลือก ได้แก่
popovertargetaction="show"
: แสดงป๊อปอัป
popovertargetaction="hide"
: ซ่อนป๊อปอัป
เมื่อใช้ popovertargetaction="hide"
คุณจะสามารถสร้างปุ่ม "ปิด" ภายในป๊อปอัป ดังในข้อมูลโค้ดต่อไปนี้
<button popovertarget="my-popover" popovertargetaction="hide">
<span aria-hidden="true">❌</span>
<span class="sr-only">Close</span>
</button>
อัตโนมัติและการเปิดโปโอเวอร์ด้วยตนเอง
การใช้แอตทริบิวต์ popover
เพียงอย่างเดียวเป็นทางลัดสำหรับ popover="auto"
เมื่อเปิดแล้ว ค่าเริ่มต้น popover
จะบังคับให้ปิดป๊อปอัปอัตโนมัติอื่นๆ ยกเว้นป๊อปอัประดับบน โดยสามารถปิดได้ด้วยการปิดแสงหรือปุ่มปิด
ในทางกลับกัน การตั้งค่า popover=manual
จะสร้างป๊อปอัปอีกประเภทหนึ่ง ได้แก่ การเปิดปิดด้วยตนเอง แท็กเหล่านี้จะไม่บังคับให้ปิดองค์ประกอบประเภทอื่นๆ และอย่าปิดด้วยการปิดแสง โดยคุณต้องปิดตัวจับเวลาด้วยตัวจับเวลาหรือการดำเนินการปิดอย่างชัดแจ้ง ประเภทของป๊อปอัปที่เหมาะกับ popover=manual
คือองค์ประกอบที่ปรากฏและหายไป แต่ไม่ควรส่งผลต่อส่วนที่เหลือของหน้า เช่น การแจ้งเตือนด้วยข้อความโทสต์
ถ้าคุณสำรวจการสาธิตด้านบน คุณจะเห็นว่าการคลิกนอกพื้นที่ป๊อปโอเวอร์ไม่ได้ทำให้หน้าต่างเปิดขึ้นมา นอกจากนี้ หากมีป๊อปอัปอื่นๆ เปิดอยู่ ธุรกิจจะไม่ปิด
วิธีตรวจสอบความแตกต่างมีดังนี้
ป๊อปโอเวอร์กับ popover=auto
:
- เมื่อเปิด ให้บังคับปิดป๊อปอัปอื่นๆ
- ปิดไฟได้
ป๊อปโอเวอร์กับ popover=manual
:
- อย่าบังคับปิดองค์ประกอบประเภทอื่นๆ
- อย่าปิดไฟ ปิดโดยใช้ปุ่มสลับหรือปิด
ป๊อปโอเวอร์สำหรับการจัดรูปแบบ
จนถึงตอนนี้ คุณได้เรียนรู้เกี่ยวกับป๊อปอัปพื้นฐานใน HTML แต่ก็ยังมีฟีเจอร์การจัดรูปแบบดีๆ บางอย่างที่มาพร้อมกับ popover
ด้วย หนึ่งในนั้นคือความสามารถในการจัดรูปแบบ ::backdrop
ในป๊อปอัป auto
ข้อมูลนี้คือเลเยอร์ใต้เลเยอร์บนสุด (ที่ที่ป๊อปอัปอาศัยอยู่) ซึ่งอยู่เหนือส่วนที่เหลือของหน้าเว็บ ในตัวอย่างต่อไปนี้ ::backdrop
จะมีสีแบบกึ่งโปร่งใส:
#size-guide::backdrop {
background: rgb(190 190 190 / 50%);
}
ความแตกต่างระหว่าง popover
และ dialog
โปรดทราบว่าแอตทริบิวต์ popover
ไม่ได้ให้ความหมายของตนเอง และแม้ว่าคุณจะสร้างประสบการณ์ที่เหมือนกับกล่องโต้ตอบโมดัลโดยใช้ popover="auto"
ได้แล้ว แต่ก็มีข้อแตกต่างสำคัญระหว่าง 2 อย่างดังนี้
องค์ประกอบ dialog
ที่เปิดด้วย dialog.showModal
(กล่องโต้ตอบโมดัล) เป็นประสบการณ์ที่ต้องมีการโต้ตอบของผู้ใช้อย่างชัดแจ้งเพื่อปิดโมดัลนี้
popover
รองรับการปิดแสง แต่ dialog
จะไม่ดำเนินการดังกล่าว
กล่องโต้ตอบโมดัลทำให้ส่วนที่เหลือของหน้าเฉื่อยเฉื่อย แต่ popover
ไม่ได้ทำเช่นนั้น
การสาธิตด้านบนเป็นกล่องโต้ตอบเชิงความหมายที่มีลักษณะการทำงานแบบป๊อปอัป ซึ่งหมายความว่าส่วนที่เหลือของหน้าไม่มีปฏิกิริยาเฉียบพลันและหน้าต่างกล่องโต้ตอบที่เปิดขึ้นมาจะมีลักษณะการทำงานแบบปิดแสง คุณสามารถสร้างกล่องโต้ตอบนี้ที่มีลักษณะการทำงานแบบป๊อปอัปโดยใช้โค้ดต่อไปนี้
<button popovertarget="candle-01">
Quick Shop
</button>
<dialog popover id="candle-01">
<button class="close-btn" popovertarget="candle-01" popovertargetaction="hide">...</button>
<div class="product-preview-container">
...
</div>
</dialog>
เร็วๆ นี้
การเข้าและออกแบบอินเทอร์แอกทีฟ
ความสามารถในการทำให้พร็อพเพอร์ตี้ที่แยกกันเป็นภาพเคลื่อนไหว เช่น การสร้างภาพเคลื่อนไหวจากและไปยัง display: none
และการสร้างภาพเคลื่อนไหวไปยังและจากเลเยอร์บนสุดยังไม่พร้อมให้บริการในเบราว์เซอร์ อย่างไรก็ตาม มีการวางแผนเกี่ยวกับ Chromium เวอร์ชันที่กำลังจะเปิดตัวอย่างใกล้ชิดหลังจากการเปิดตัวรุ่นนี้
ความสามารถในการทำให้พร็อพเพอร์ตี้ที่แยกกันทำให้เคลื่อนไหวได้ รวมถึงการใช้ :popover-open
และ @starting-style
จะทำให้คุณตั้งค่ารูปแบบก่อนเปลี่ยนแปลงและหลังการเปลี่ยนแปลงเพื่อให้การเปลี่ยนเป็นไปอย่างราบรื่นได้เมื่อเปิดและปิดป๊อปอัป ใช้ตัวอย่างก่อนหน้านี้ ภาพเคลื่อนไหวเข้าและออกจะดูลื่นไหลกว่ามากและสนับสนุนประสบการณ์ของผู้ใช้ที่ราบรื่นยิ่งขึ้น
การวางตำแหน่งจุดยึด
ป๊อปโอเวอร์มีประโยชน์เมื่อคุณต้องการจัดตำแหน่งการแจ้งเตือน โมดัล หรือการแจ้งเตือนโดยอิงตามวิวพอร์ต แต่ป๊อปอัปยังมีประโยชน์สำหรับเมนู เคล็ดลับเครื่องมือ และองค์ประกอบอื่นๆ ที่ต้องจัดตำแหน่งให้สัมพันธ์กับองค์ประกอบอื่นๆ และนี่คือจุดที่การ Anchor ของ CSS เข้ามามีบทบาท
การสาธิตเมนูแบบรัศมีต่อไปนี้ใช้ API แบบป๊อปโอเวอร์ร่วมกับการกำหนดตำแหน่งแท็ก Anchor ของ CSS เพื่อให้แน่ใจว่าจะตรึงป๊อปอัป #menu-items
ไว้กับทริกเกอร์การสลับ ซึ่งก็คือปุ่ม #menu-toggle
เสมอ
การตั้งค่า Anchor จะคล้ายกับการตั้งค่าป๊อปอัป ดังนี้
<button id="menu-toggle" popovertarget="menu-items">
Open Menu
</button>
<ul id="menu-items" popover anchor="menu-toggle">
<li class="item">...</li>
<li class="item">...</li>
</ul>
คุณตั้งค่า Anchor ด้วยการใส่ id
(ในตัวอย่างนี้คือ #menu-toggle
) แล้วใช้ anchor="menu-toggle"
เพื่อเชื่อมต่อทั้ง 2 องค์ประกอบ ตอนนี้คุณสามารถใช้ anchor()
เพื่อจัดรูปแบบป๊อปโอเวอร์ เมนูป๊อปอัปที่อยู่ตรงกลางซึ่งยึดอยู่กับฐานของปุ่มเปิด/ปิดจุดยึดอาจมีการจัดรูปแบบดังนี้
#menu-items {
bottom: anchor(bottom);
left: anchor(center);
translate: -50% 0;
}
ตอนนี้คุณมีเมนูป๊อปอัปที่ใช้งานได้อย่างสมบูรณ์ ซึ่งจะถูกยึดไว้กับปุ่มเปิด/ปิดและมีฟีเจอร์ในตัวทั้งหมดของป๊อปอัปโดยไม่จำเป็นต้องใช้ JavaScript
บทสรุป
Popover API เป็นขั้นตอนแรกในชุดความสามารถใหม่ที่จะช่วยให้การสร้างเว็บแอปพลิเคชันสามารถจัดการได้ง่ายขึ้นและสามารถเข้าถึงได้ง่ายขึ้นโดยค่าเริ่มต้น ตื่นเต้นที่จะได้เห็นคุณใช้งานป๊อปโอเวอร์!