ป๊อปอัปและกล่องโต้ตอบ

ป๊อปโอเวอร์คือองค์ประกอบใดก็ตามที่มีแอตทริบิวต์ popover และมีประโยชน์สำหรับรูปแบบการโต้ตอบที่หลากหลาย ซึ่งรวมถึงเคล็ดลับเครื่องมือ การแจ้งเตือน ข้อความแจ้ง และอื่นๆ

<div id="my-popover" popover>My popover content</div>

แอตทริบิวต์ popover จะซ่อนองค์ประกอบตามค่าเริ่มต้น และคุณต้องระบุวิธีให้ผู้ใช้เปิดองค์ประกอบ แม้ว่าป๊อปโอเวอร์จะอยู่ในเลเยอร์บนสุดเหนือเนื้อหาอื่นๆ ทั้งหมด แต่ก็ไม่ใช่โมดอล ซึ่งหมายความว่าคุณยังคงโต้ตอบกับเนื้อหาภายนอกป๊อปโอเวอร์ได้

การควบคุมป๊อปโอเวอร์

ก่อนที่จะไปดูป๊อปโอเวอร์ประเภทต่างๆ และลักษณะการทำงานของป๊อปโอเวอร์ มาดูวิธีเปิดและปิดป๊อปโอเวอร์กันก่อน

เชิงประกาศ

คุณควบคุมป๊อปโอเวอร์ได้ทั้งหมดใน HTML โดยไม่ต้องใช้ JavaScript โดยใช้ปุ่ม (และอินพุตที่มีbutton type) และแอตทริบิวต์ popovertarget

ป๊อปโอเวอร์ในข้อมูลโค้ดก่อนหน้ามี id เป็น my-popover และคุณใช้ป๊อปโอเวอร์นี้เพื่ออ้างอิงถึงป๊อปโอเวอร์ได้

<button popovertarget="my-popover">Toggle</button>

นอกจากนี้ คุณยังระบุได้ว่าปุ่มควรเปิดหรือปิดป๊อปโอเวอร์โดยใช้ popovertargetaction="show" และ popovertargetaction="hide"

ด้วย JavaScript

นอกจากนี้ คุณยังควบคุมป๊อปโอเวอร์โดยใช้ JavaScript ได้ด้วย ซึ่งจะมีประโยชน์เมื่อต้องการแสดงป๊อปโอเวอร์เพื่อตอบสนองต่อสิ่งอื่นนอกเหนือจากการคลิกปุ่มของผู้ใช้ หากต้องการทำเช่นนี้ คุณต้องรับองค์ประกอบป๊อปโอเวอร์ แล้วเรียกใช้ showPopover(), hidePopover() หรือ togglePopover()

ประเภทของป๊อปโอเวอร์

เมื่อเพิ่มป๊อปโอเวอร์ลงในเว็บไซต์ คุณต้องพิจารณาการโต้ตอบหลายอย่าง จะเปิดอย่างไร ผู้ใช้จะปิดข้อความนี้ได้อย่างไร จะเกิดอะไรขึ้นกับป๊อปโอเวอร์อื่นๆ ที่เปิดอยู่ ป๊อปโอเวอร์มี 3 ประเภท และคุณสามารถเลือกประเภทที่ให้ลักษณะการทำงานและการโต้ตอบที่กรณีการใช้งานของคุณต้องการ

ป๊อปโอเวอร์อัตโนมัติ

ป๊อปโอเวอร์อัตโนมัติมีฟังก์ชันการทำงานในตัวมากที่สุด และเป็นค่าเริ่มต้นหากคุณไม่ได้ระบุประเภท

<div id="popover" popover>My popover</div>

ในหลายๆ กรณี คุณไม่ต้องการให้ป๊อปโอเวอร์หลายรายการเปิดพร้อมกัน ดังนั้นป๊อปโอเวอร์อัตโนมัติจะปิดป๊อปโอเวอร์อัตโนมัติอื่นๆ เมื่อเปิด นอกจากนี้ยังรองรับ "ปิดอย่างรวดเร็ว" ซึ่งหมายความว่าหากคุณคลิกนอกป๊อปโอเวอร์ ระบบจะปิดโดยอัตโนมัติ นอกจากนี้ คุณยังปิดได้ด้วยแป้น Esc

ป๊อปอัปที่ต้องดำเนินการด้วยตนเอง

แม้ว่าลักษณะการทำงานของป๊อปโอเวอร์อัตโนมัติจะครอบคลุมกรณีการใช้งานจำนวนมาก แต่ก็มีบางกรณีที่คุณอาจต้องควบคุมป๊อปโอเวอร์มากขึ้น ป๊อปโอเวอร์ที่สร้างขึ้นเองจะช่วยให้คุณควบคุมได้มากขึ้น และคุณยังต้องรับผิดชอบต่อลักษณะการทำงานต่างๆ มากขึ้นด้วย

<div id="popover" popover="manual">My popover</div>

ป๊อปโอเวอร์นี้จะปิดเมื่อคุณปิดอย่างชัดเจนเท่านั้น โดยจะปิดด้วยการปิดแบบเบาหรือปุ่ม Esc ไม่ได้ แต่จะช่วยให้คุณเปิดป๊อปโอเวอร์หลายรายการพร้อมกันได้

ป๊อปอัปคำแนะนำ

นอกจากนี้ คุณอาจต้องการใช้ป๊อปโอเวอร์เพื่อเพิ่มเคล็ดลับเครื่องมือลงในหน้าเว็บด้วย ในรูปแบบนี้ คุณต้องการวางเมาส์เหนือรายการและดูคำอธิบายได้ โดยควรเปิดเพียงรายการเดียวในแต่ละครั้ง หากใช้ป๊อปโอเวอร์อัตโนมัติ การเปิดป๊อปโอเวอร์หนึ่งจะปิดป๊อปโอเวอร์อัตโนมัติอื่นๆ ที่เปิดอยู่ หากใช้ป๊อปโอเวอร์ที่กำหนดเอง คุณจะต้องติดตั้งใช้งานลักษณะการทำงานหลายอย่างด้วยตนเอง รวมถึงการปิดป๊อปโอเวอร์อื่นๆ ป๊อปโอเวอร์คำแนะนำเป็นตัวเลือกที่ 3 ซึ่งมีลักษณะการทำงานคล้ายกับป๊อปโอเวอร์อัตโนมัติ อย่างไรก็ตาม การเปิดป๊อปโอเวอร์คำแนะนำจะไม่ปิดป๊อปโอเวอร์อัตโนมัติ

<div id="popover" popover="hint">My popover</div>

ป๊อปอัปคำแนะนำมีประโยชน์สำหรับข้อมูลเสริมที่เป็นรองเนื้อหาหลัก คุณมักต้องการทริกเกอร์ป๊อปโอเวอร์คำแนะนำด้วยเหตุการณ์ที่ไม่ใช่การคลิก เช่น การวางเมาส์เหนือหรือโฟกัส

การวางตำแหน่งป๊อปโอเวอร์

โดยค่าเริ่มต้น ป๊อปโอเวอร์จะเปิดขึ้นตรงกลางหน้าจอ โดยจะเพิ่มลงในเลเยอร์บนสุด เหนือเนื้อหาอื่นๆ ทั้งหมด และสามารถวางตำแหน่งที่สัมพันธ์กับวิวพอร์ตได้

แต่ก็ไม่เหมาะเสมอไป เนื่องจากคุณมักต้องการวางป๊อปโอเวอร์ไว้ใกล้กับรายการที่ทริกเกอร์ป๊อปโอเวอร์ การวางตำแหน่งจุดยึดช่วยให้คุณทำเช่นนั้นได้

การวางตำแหน่ง Anchor มี 2 ขั้นตอน ได้แก่ การกำหนดองค์ประกอบ Anchor และการวางองค์ประกอบที่สัมพันธ์กับ Anchor นั้น ป๊อปโอเวอร์สามารถจัดการขั้นตอนแรกได้โดยการตั้งค่าจุดยึดโดยนัยให้คุณ เมื่อเปิดป๊อปโอเวอร์โดยใช้ <button popovertarget> ปุ่มจะเป็น Anchor โดยนัย หากเปิดป๊อปโอเวอร์โดยใช้ JavaScript คุณจะตั้งค่าแองเคอร์โดยนัยได้ด้วยตัวเลือก source

โดยค่าเริ่มต้น ป๊อปโอเวอร์จะอยู่ตรงกลางโดยใช้ margin: auto หากต้องการใช้การวางตำแหน่งจุดยึด คุณอาจต้องลบล้างโดยการตั้งค่า margin: unset

รูปแบบและภาพเคลื่อนไหว

องค์ประกอบจำลอง ::backdrop

ป๊อปโอเวอร์จะเปิดในเลเยอร์บนสุด เหนือเนื้อหาอื่นๆ ทั้งหมดในหน้า ด้านล่างป๊อปโอเวอร์คือ::backdropองค์ประกอบเสมือนที่จัดรูปแบบได้

โปรดทราบว่าเนื้อหาภายนอกป๊อปโอเวอร์ไม่ได้อยู่เฉยๆ คุณยังคงคลิกปุ่มและใช้แป้นพิมพ์เพื่อไปยังส่วนต่างๆ ของหน้าได้ คุณไม่ควรบดบังเนื้อหาของหน้าเว็บ เช่น โดยการใช้เอฟเฟกต์เบลอที่มากเกินไปหรือตั้งค่าพื้นหลังเป็นสีทึบ

คลาสเสมือน :popover-open

สมมติว่าคุณต้องการจัดวางเนื้อหาป๊อปโอเวอร์โดยใช้ CSS Grid คุณเพิ่ม [popover]{ display: grid } แล้วจู่ๆ ป๊อปโอเวอร์ทั้งหมดก็ปรากฏขึ้น เนื่องจากป๊อปโอเวอร์ถูกซ่อนไว้โดยใช้ display: none คุณใช้:popover-openคลาสเสมือนเพื่อใช้รูปแบบได้เฉพาะเมื่อป๊อปโอเวอร์เปิดอยู่

[popover]{
/* Don't do this! All popovers will be visible.  */
  display: grid;
}

[popover]:popover-open {
/*  This will only affect open popovers. */
  display: grid;
}

:popover-open ยังมีประโยชน์เมื่อคุณกำลังสร้างภาพเคลื่อนไหวของป๊อปโอเวอร์ด้วย

การทำให้ป๊อปโอเวอร์เคลื่อนไหว

ภาพเคลื่อนไหวของป๊อปโอเวอร์มี 3 ขั้นตอน ดังนี้

1. @starting-style {popover:popover-open { } }- สไตล์เริ่มต้นสำหรับป๊อปโอเวอร์ทันทีที่มองเห็นได้ โปรดทราบว่าต้องกำหนดในสไตล์ชีตหลัง #2
2. popover:popover-open { }- รูปแบบสำหรับป๊อปโอเวอร์เมื่อเปิดอยู่
3. popover { }-รูปแบบที่ป๊อปโอเวอร์จะเปลี่ยนไปเมื่อปิด

ระบบจะซ่อนป๊อปโอเวอร์โดยใช้ display: none เมื่อไม่ได้เปิด หากต้องการเคลื่อนไหว คุณจะต้องตั้งค่า transition-behavior: allow-discrete และเพิ่ม display ลงในรายการพร็อพเพอร์ตี้ใน transition ด้วย

หากวางตำแหน่งป๊อปโอเวอร์ด้วย Anchor โดยนัย คุณจะต้องเพิ่ม overlay ในรายการพร็อพเพอร์ตี้ใน transition ด้วย ความสัมพันธ์ของ Anchor โดยนัยจะถูกนำออกเมื่อนำป๊อปโอเวอร์ออกจากเลเยอร์บนสุด ดังนั้นการเพิ่มการเปลี่ยนไปยังพร็อพเพอร์ตี้ overlay จะทำให้ความสัมพันธ์ดังกล่าวล่าช้าจนกว่าการเปลี่ยนขาออกจะเสร็จสมบูรณ์

การโต้ตอบระหว่างป๊อปโอเวอร์

คุณอาจมีป๊อปโอเวอร์หลายรายการในหน้าเว็บ และวิธีที่ป๊อปโอเวอร์โต้ตอบจะขึ้นอยู่กับประเภทและวิธีใช้

ป๊อปโอเวอร์ที่ซ้อนกัน

ในบางกรณี คุณอาจต้องเปิดป๊อปโอเวอร์จากภายในป๊อปโอเวอร์อื่น เช่น คุณอาจมีเมนูป๊อปโอเวอร์ และรายการเมนูรายการหนึ่งเปิดเมนูย่อย เมื่อผู้ใช้ปิดเมนูหลัก คุณไม่ต้องการให้เมนูย่อยเปิดอยู่ ป๊อปโอเวอร์ช่วยจัดการเรื่องนี้ได้โดยอัตโนมัติ

หากคุณเปิดป๊อปโอเวอร์คำใบ้จากป๊อปโอเวอร์คำใบ้ หรือป๊อปโอเวอร์อัตโนมัติจากป๊อปโอเวอร์อัตโนมัติ ระบบจะวางป๊อปโอเวอร์ไว้ในสแต็ก การปิดป๊อปโอเวอร์จะเป็นการปิดป๊อปโอเวอร์ทั้งหมดที่อยู่หลังป๊อปโอเวอร์นั้นในสแต็กด้วย นอกจากนี้ยังใช้ได้กับการปิดแบบเบาด้วย หากคุณคลิกป๊อปโอเวอร์ ป๊อปโอเวอร์ทั้งหมดที่อยู่หลังป๊อปโอเวอร์นั้นในสแต็กจะปิด แต่ป๊อปโอเวอร์ก่อนหน้าจะยังเปิดอยู่

ระบบจะเพิ่มป๊อปโอเวอร์ลงในสแต็กหากองค์ประกอบแหล่งที่มาอยู่ภายในป๊อปโอเวอร์ ระบบจะตั้งค่าองค์ประกอบแหล่งที่มาโดยอัตโนมัติเมื่อคุณใช้ popovertarget ในปุ่ม หรือใช้ JavaScript โดยการตั้งค่าตัวเลือก source เมื่อเรียกใช้ .showPopover({source}) หรือ .togglePopover({source})

มีสแต็กสำหรับป๊อปโอเวอร์อัตโนมัติ และสแต็กแยกต่างหากสำหรับป๊อปโอเวอร์คำแนะนำ อย่างไรก็ตาม หากคุณเปิดป๊อปโอเวอร์คำแนะนำจากภายในป๊อปโอเวอร์อัตโนมัติ ระบบจะเพิ่มป๊อปโอเวอร์คำแนะนำลงในสแต็กอัตโนมัติ

โปรดทราบว่าป๊อปอัปคำแนะนำมีไว้สำหรับข้อมูลชั่วคราวที่เรียบง่ายกว่า ดังนั้นคุณจึงไม่สามารถทริกเกอร์ป๊อปอัปอัตโนมัติจากป๊อปอัปคำแนะนำได้

หากใช้ป๊อปอัปที่กำหนดเอง คุณจะต้องจัดการทั้งหมดนี้ด้วยตนเอง

การปิดป๊อปโอเวอร์ประเภทอื่นๆ

คุณได้ทราบแล้วว่าการเปิดป๊อปโอเวอร์อัตโนมัติจะปิดป๊อปโอเวอร์อัตโนมัติอื่นๆ แต่ป๊อปโอเวอร์อัตโนมัติประเภทต่างๆ ทำงานร่วมกันอย่างไร ดูตัวอย่างหน้าเว็บที่ใช้ทั้ง 3 ประเภท มีเมนูการนำทางที่มีปุ่มซึ่งใช้ป๊อปโอเวอร์อัตโนมัติเพื่อเปิดและปิด มีข้อความในหน้าเว็บที่ใช้ป๊อปโอเวอร์คำแนะนำเพื่อแสดงเคล็ดลับเครื่องมือตามบริบท และสุดท้ายจะมีข้อความป๊อปอัปพร้อมป๊อปโอเวอร์แบบกำหนดเองเพื่อให้ผู้ใช้ทราบว่างานในเบื้องหลังเสร็จสมบูรณ์แล้ว

เคล็ดลับเครื่องมือจะปรากฏขึ้นชั่วคราวเมื่อวางเมาส์เหนือข้อความ เราคาดว่าจะมีเคล็ดลับเครื่องมือเพียงรายการเดียวที่มองเห็นได้ในแต่ละครั้ง และการทริกเกอร์ป๊อปโอเวอร์คำแนะนำที่ 2 จะปิดป๊อปโอเวอร์แรก

เมื่อคุณเปิดเมนูโดยคลิกปุ่ม คำแนะนำจะปิดลงด้วย 2 เหตุผลต่อไปนี้ ประการแรก การคลิกนอกคำแนะนำจะทำให้ระบบปิดคำแนะนำอย่างรวดเร็ว ประการที่ 2 การเปิดป๊อปโอเวอร์อัตโนมัติจะปิดป๊อปโอเวอร์คำแนะนำที่เปิดอยู่ทั้งหมด เนื่องจากผู้ใช้ได้เปลี่ยนสิ่งที่กำลังโฟกัสอยู่ และเนื้อหาชั่วคราวในป๊อปโอเวอร์คำแนะนำจึงไม่เกี่ยวข้องอีกต่อไป ซึ่งหมายความว่าหากคุณเรียกใช้ showPopover() ในป๊อปโอเวอร์อัตโนมัติ ป๊อปโอเวอร์คำแนะนำที่เปิดอยู่จะปิด

เมนูแบบเลื่อนลงคือป๊อปโอเวอร์อัตโนมัติ เมนูแบบเลื่อนลงควรเปิดได้ครั้งละ 1 เมนูเท่านั้น และการเปิดเมนูหนึ่งจะปิดอีกเมนูหนึ่ง ดังที่เห็น การเปิดป๊อปโอเวอร์อัตโนมัติจะปิดป๊อปโอเวอร์คำใบ้ที่เปิดอยู่ด้วย

อย่างไรก็ตาม ขณะที่เมนูแบบเลื่อนลงเปิดอยู่ คุณอาจยังต้องการดูเนื้อหาของเคล็ดลับเครื่องมือที่ไม่เกี่ยวข้อง การแสดงเคล็ดลับจะไม่ปิดป๊อปโอเวอร์อัตโนมัติ

ป๊อปโอเวอร์แบบกำหนดเองจะไม่ได้รับผลกระทบจากป๊อปโอเวอร์อัตโนมัติหรือป๊อปโอเวอร์คำแนะนำ และเมื่อเปิดขึ้น ป๊อปโอเวอร์แบบกำหนดเองจะไม่ปิดป๊อปโอเวอร์คำแนะนำหรือป๊อปโอเวอร์อัตโนมัติ อย่างไรก็ตาม หากคุณเปิดป๊อปโอเวอร์ด้วยตนเองโดยคลิกปุ่ม การดำเนินการนี้จะทริกเกอร์การปิดคำใบ้และป๊อปโอเวอร์อัตโนมัติ

การโต้ตอบระหว่างประเภทป๊อปโอเวอร์อาจดูซับซ้อน แต่จะช่วยให้ใช้รูปแบบการใช้งานทั่วไปได้หากคุณใช้ประเภทต่างๆ ในสถานการณ์ที่ถูกต้อง หากป๊อปโอเวอร์ไม่โต้ตอบตามที่คาดไว้ ให้กลับไปดูประเภทที่คุณใช้

ทดสอบความเข้าใจ