ป๊อปอัปมีอยู่ทุกที่บนเว็บ คุณสามารถดูข้อมูลเหล่านี้ได้ในเมนู เคล็ดลับการเปิด/ปิด และกล่องโต้ตอบ ซึ่งสามารถแสดงเป็นการตั้งค่าบัญชี วิดเจ็ตการเปิดเผยข้อมูล และตัวอย่างการ์ดผลิตภัณฑ์ แม้ว่าองค์ประกอบเหล่านี้จะแพร่หลายเพียงใด แต่การสร้างองค์ประกอบดังกล่าวในเบราว์เซอร์ยังคงมีความยุ่งยากอย่างไม่น่าเชื่อ คุณต้องเพิ่มการเขียนสคริปต์เพื่อจัดการโฟกัส สถานะเปิด และการปิด ฮุกที่เข้าถึงได้ในคอมโพเนนต์ การเชื่อมโยงแป้นพิมพ์เพื่อเข้าและออกจากประสบการณ์ และทั้งหมดนี้ก็คือก่อนที่คุณจะเริ่มสร้างฟังก์ชันหลักที่มีประโยชน์ ไม่ซ้ำใคร ของหน้าต่างป็อปโอเวอร์ของคุณ
เพื่อแก้ไขปัญหานี้ 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 เป็นขั้นตอนแรกในชุดความสามารถใหม่ที่จะช่วยให้การสร้างเว็บแอปพลิเคชันสามารถจัดการได้ง่ายขึ้นและสามารถเข้าถึงได้ง่ายขึ้นโดยค่าเริ่มต้น ตื่นเต้นที่จะได้เห็นคุณใช้งานป๊อปโอเวอร์!