กล่องโต้ตอบแบบโมดัลคือกล่องป๊อปอัปประเภทพิเศษบนหน้าเว็บ ป๊อปอัปที่ขัดจังหวะผู้ใช้เพื่อให้โฟกัสกับตัวเองได้ มี กรณีการใช้งานที่ถูกต้องสำหรับป๊อปอัปกล่องโต้ตอบอยู่บ้าง แต่ ควรสร้างขึ้นก่อนทำเช่นนั้น กล่องโต้ตอบแบบโมดัลบังคับให้ผู้ใช้จดจ่อกับเนื้อหาที่เฉพาะเจาะจง และละเว้นเป็นการชั่วคราว ที่เหลือในหน้านั้น
กล่องโต้ตอบอาจเป็นแบบโมดัล (เฉพาะเนื้อหาในกล่องโต้ตอบเท่านั้นที่สามารถโต้ตอบได้) หรือแบบไม่โมดัล (ยังคงสามารถโต้ตอบได้ กับเนื้อหานอกกล่องโต้ตอบ) กล่องโต้ตอบแบบคำสั่งจะแสดงที่ด้านบนของเนื้อหาที่เหลือในหน้า ที่เหลือ ของหน้าเป็นแบบเอียง และโดยค่าเริ่มต้นจะบดบังด้วยฉากหลังกึ่งโปร่งใส
องค์ประกอบ HTML เชิงความหมาย <dialog> สำหรับสร้างกล่องโต้ตอบ
มาพร้อมกับความหมาย การโต้ตอบกับแป้นพิมพ์ รวมถึงคุณสมบัติและวิธีการทั้งหมดของอินเทอร์เฟซ HTMLDialogElement
กล่องโต้ตอบแบบโมดัล
ต่อไปนี้คือตัวอย่างของ <dialog> แบบโมดัล เปิดกล่องโต้ตอบที่มี "เปิดกล่องโต้ตอบโมดัล" เมื่อเปิดกล่องโต้ตอบแล้ว คุณจะปิดกล่องโต้ตอบได้ 3 วิธี ได้แก่ ปุ่ม Escape และส่งแบบฟอร์มที่มี
ปุ่มที่มีปุ่ม formmethod="dialog"
(หรือหากฟอร์มมีการตั้งค่า method="dialog" ไว้) และเมธอด HTMLDialogElement.close()
HTMLDialogElement มี 3 เมธอดหลักพร้อมกับเมธอดทั้งหมดที่รับมาจาก HTMLElement
dialog.show() /* opens the dialog */
dialog.showModal() /* opens the dialog as a modal */
dialog.close() /* closes the dialog */
เนื่องจาก <dialog> นี้เปิดผ่าน HTMLDialogElement.showModal()
ก็เป็นกล่องโต้ตอบแบบโมดัล การเปิดกล่องโต้ตอบโมดัลจะเป็นการปิดใช้งานและปิดบังทุกอย่างยกเว้นตัวกล่องโต้ตอบ หากคุณ
วางเมาส์เหนือ UI นอกกล่องโต้ตอบ คุณจะเห็นว่าองค์ประกอบทั้งหมดทํางานราวกับว่า pointer-events: none;
ตั้งค่าแล้ว แม้แต่ปุ่มที่เปิดกล่องโต้ตอบก็จะไม่ตอบสนองต่อการโต้ตอบ
เมื่อกล่องโต้ตอบเปิดขึ้น โฟกัสจะย้ายไปอยู่ในกล่องโต้ตอบ โฟกัสจะถูกตั้งค่าที่องค์ประกอบแรกในลำดับการไปยังส่วนต่างๆ ด้วยแป้นพิมพ์ตามลำดับภายในกล่องโต้ตอบนั้น
หากกดแป้น tab ซ้ำๆ คุณจะเห็นว่ามีเพียงเนื้อหาในกล่องโต้ตอบเท่านั้นที่จะโฟกัสได้ในขณะที่กล่องโต้ตอบโมดัลอยู่
เปิดอยู่ ทุกอย่างที่อยู่ภายนอกกล่องโต้ตอบโมดัลจะไม่มีการเปลี่ยนแปลงตราบใดที่กล่องโต้ตอบเปิดอยู่
เมื่อปิดกล่องโต้ตอบ ไม่ว่าจะด้วยโมดัลหรือไม่ ระบบจะย้ายโฟกัสกลับไปยังองค์ประกอบที่เปิดกล่องโต้ตอบ หากคุณใช้โปรแกรม เปิดกล่องโต้ตอบที่ไม่ได้อิงจากการดำเนินการของผู้ใช้ พิจารณาใหม่ หากจําเป็น ให้ตรวจสอบว่าได้ใส่โฟกัสกลับไปที่ตำแหน่งเดิมก่อนที่กล่องโต้ตอบจะเปิดขึ้น โดยเฉพาะหากผู้ใช้ปิดกล่องโต้ตอบโดยไม่โต้ตอบกับกล่องโต้ตอบ
มีแอตทริบิวต์ inert ร่วมที่สามารถใช้เพื่อปิดใช้องค์ประกอบและองค์ประกอบสืบทอดทั้งหมด ยกเว้นองค์ประกอบที่ใช้งานอยู่
กล่องโต้ตอบ เมื่อกล่องโต้ตอบแบบโมดัลเปิดขึ้นโดยใช้ showModal() ความรู้สึกเฉื่อยชาหรือการปิดใช้งานจะเปิดใช้งานโดยไม่เสียค่าใช้จ่าย แอตทริบิวต์
ไม่ได้ตั้งค่าไว้อย่างชัดแจ้ง
คุณสามารถจัดรูปแบบฉากหลังที่บดบังสิ่งอื่นนอกจากกล่องโต้ตอบได้โดยใช้::backdrop
องค์ประกอบเทียม ฉากหลังจะแสดงก็ต่อเมื่อ <dialog> แสดงขึ้นด้วยเมธอด .showModal() องค์ประกอบเทียมนี้
ตรงกับฉากหลังทั้งหมด รวมถึงฉากหลังที่แสดงเมื่อใช้ FullScreen API
เช่น เมื่อดูวิดีโอในโหมดเต็มหน้าจอ ซึ่งไม่มีสัดส่วนภาพเท่ากับหน้าจอหรือจอภาพ
กล่องโต้ตอบที่ไม่ใช่โมดัล
ในทำนองเดียวกัน HTMLDialogElement.show() จะเปิดกล่องโต้ตอบ แต่จะไม่เพิ่มฉากหลังหรือทำให้มีอะไรเฉื่อยขึ้น
แป้น Escape ไม่ปิดกล่องโต้ตอบที่ไม่ใช่โมดัล ด้วยเหตุนี้ คุณจึงต้องใส่เมธอด
ของการปิดกล่องโต้ตอบที่ไม่ใช่โมดัล เพราะหากยิ่งอยู่นอกกล่องโต้ตอบ โฟกัสจะกลับไปที่องค์ประกอบนั้นได้
ที่เปิดกล่องโต้ตอบ ซึ่งอาจไม่ใช่ประสบการณ์ที่ดีที่สุดของผู้ใช้
แม้ว่าข้อกำหนดไม่ได้กำหนดปุ่มสำหรับปิดกล่องโต้ตอบอย่างเป็นทางการ แต่ก็ถือว่าเป็นการดำเนินการที่จำเป็น ปุ่ม Escape จะปิดกล่องโต้ตอบแบบโมดัล แต่จะไม่เป็นแบบโมดัล ปุ่มที่มองเห็นได้ซึ่งรับโฟกัสได้จะช่วยปรับปรุงการช่วยเหลือพิเศษและ ประสบการณ์ของผู้ใช้
การปิดกล่องโต้ตอบ
คุณไม่จำเป็นต้องใช้เมธอด HTMLDialogElement.close() เพื่อปิดกล่องโต้ตอบ คุณไม่จำเป็นต้องใช้ JavaScript เลย วิธีปิด<dialog>
หากไม่มี JavaScript ให้ใส่แบบฟอร์มที่มีเมธอดในกล่องโต้ตอบโดยการตั้งค่า method="dialog" ใน <form> หรือ formmethod="dialog"
บนปุ่ม
เมื่อผู้ใช้ส่งผ่านเมธอด dialog สถานะของข้อมูลที่ป้อนโดยผู้ใช้จะยังคงอยู่ ขณะมีเหตุการณ์ส่ง -
แบบฟอร์มต้องผ่านการตรวจสอบข้อจำกัด (เว้นแต่มีการตั้งค่า novalidate) จะไม่มีการล้างหรือส่งข้อมูลผู้ใช้
ปุ่มปิดที่ไม่มี JavaScript สามารถเขียนได้ดังนี้
<dialog open>
<form method="dialog">
<button type="submit" autofocus>close</button>
</form>
</dialog>
คุณอาจสังเกตเห็นแอตทริบิวต์ autofocus
ซึ่งกำหนดให้ปิด <button> ในตัวอย่างนี้ องค์ประกอบที่มีแอตทริบิวต์ autofocus ที่ตั้งค่าไว้ภายใน <dialog> จะไม่ได้รับ
โฟกัสที่การโหลดหน้าเว็บ (เว้นแต่หน้าเว็บจะโหลดโดยมีกล่องโต้ตอบแสดงขึ้น) แต่จะได้รับโฟกัสเมื่อกล่องโต้ตอบเปิดขึ้น
โดยค่าเริ่มต้น เมื่อเปิดกล่องโต้ตอบ องค์ประกอบที่โฟกัสได้รายการแรกภายในกล่องโต้ตอบจะได้รับโฟกัส
ภายในกล่องโต้ตอบจะมีชุดแอตทริบิวต์ autofocus ไว้ การตั้งค่าแอตทริบิวต์ autofocus บนปุ่มปิดช่วยให้มั่นใจได้ว่า
โฟกัสจะได้รับโฟกัสเมื่อกล่องโต้ตอบเปิดขึ้น แต่การรวม autofocus ภายใน <dialog>
ควรจะต้องพิจารณาอย่างรอบคอบเท่านั้น องค์ประกอบทั้งหมดในลำดับที่อยู่ก่อนที่จะมีการข้ามองค์ประกอบโฟกัสอัตโนมัติ
เราจะพูดคุยเกี่ยวกับแอตทริบิวต์นี้เพิ่มเติมในบทเรียนที่มุ่งเน้น
อินเทอร์เฟซ HTMLDialogElement มี returnValue
การส่งแบบฟอร์มด้วย method="dialog" จะตั้งค่า returnValue เป็น name (หากมี) ของปุ่มส่งที่ใช้เพื่อ
ส่งแบบฟอร์ม หากเราเขียน <button type="submit" name="toasty">close</button> ไว้ returnValue จะเป็น toasty
เมื่อเปิดกล่องโต้ตอบ แอตทริบิวต์บูลีน open
แสดงอยู่ ซึ่งหมายความว่ากล่องโต้ตอบกำลังใช้งานอยู่และโต้ตอบได้ เมื่อเปิดกล่องโต้ตอบโดยเพิ่มแอตทริบิวต์ open แทน
มากกว่าผ่านทาง .show() หรือ .showModal() กล่องโต้ตอบจะไม่มีรูปแบบ HTMLDialogElement.open
พร็อพเพอร์ตี้จะแสดง true หรือ false ขึ้นอยู่กับว่ากล่องโต้ตอบนั้นพร้อมใช้งานสำหรับการโต้ตอบหรือไม่ ไม่ใช่ว่าเป็นโมดัลหรือไม่
แม้ว่า JavaScript เป็นวิธีที่แนะนำในการเปิดกล่องโต้ตอบ ซึ่งรวมถึงแอตทริบิวต์ open ในการโหลดหน้าเว็บ จากนั้นจึงนำออก
การใช้ .close() จะช่วยให้มั่นใจได้ว่ากล่องโต้ตอบจะทำงานได้แม้ว่าจะไม่ได้ใช้ JavaScript ก็ตาม
รายละเอียดเพิ่มเติม
ไม่ใช้ tabindex
องค์ประกอบที่เปิดใช้งานเพื่อเปิดกล่องโต้ตอบและปุ่มปิดที่อยู่ในกล่องโต้ตอบ (และอาจมีเนื้อหาอื่น) สามารถรับได้
มีสมาธิและมีการโต้ตอบ องค์ประกอบ <dialog> ไม่มีการโต้ตอบและไม่ได้รับโฟกัส ไม่ต้องเพิ่มพร็อพเพอร์ตี้ tabindex
ลงในกล่องโต้ตอบ
บทบาท ARIA
บทบาทโดยนัยคือ dialog หากกล่องโต้ตอบ
เป็นหน้าต่างยืนยันที่สื่อสารข้อความสำคัญที่ต้องมีการยืนยันหรือการตอบกลับของผู้ใช้โดยตั้งค่า role="alertdialog"
กล่องโต้ตอบควรมีชื่อที่เข้าถึงได้ หากข้อความที่มองเห็นได้ระบุสำหรับชื่อที่เข้าถึงได้ ให้เพิ่ม aria-labelledby="idOfLabelingText"
ค่าเริ่มต้นของ CSS
โปรดทราบว่าเบราว์เซอร์มีการจัดรูปแบบเริ่มต้นสำหรับ dialog Firefox, Chrome และ Edge ตั้งค่า color: CanvasText; background-color: Canvas;
และ Safari ตั้งค่า color: black; background-color: white; ในสไตล์ชีตของ User Agent color รับค่าเดิมมา
จาก dialog ไม่ใช่จาก body หรือ :root ซึ่งอาจไม่คาดคิด ไม่รับค่าพร็อพเพอร์ตี้ background-color
ตรวจสอบความเข้าใจ
ทดสอบความรู้ของคุณเกี่ยวกับองค์ประกอบกล่องโต้ตอบ
คุณจัดรูปแบบพื้นที่ด้านหลังกล่องโต้ตอบอย่างไร
::background::backdropbackground