องค์ประกอบของกล่องโต้ตอบ - โมดัลที่ใช้ง่าย

Eiji Kitamura

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

  • show(): เปิดกล่องโต้ตอบ
  • close(): ปิดกล่องโต้ตอบ เลือกใช้อาร์กิวเมนต์ที่ไม่บังคับ ซึ่งหากมีการตั้งค่าเป็น dialog.returnValue
  • showModal(): เปิดกล่องโต้ตอบโมดัล
  • ::backdrop: องค์ประกอบจำลองเพื่อจัดรูปแบบพื้นหลังหลังกล่องโต้ตอบโมดัล
  • close เหตุการณ์: เริ่มทำงานเมื่อกล่องโต้ตอบปิดอยู่

อัปเดตเมื่อวันที่ 16 ธ.ค. 2013

ตอนนี้องค์ประกอบ dialog รองรับรายการต่อไปนี้

  • เหตุการณ์ cancel: เริ่มทำงานเมื่อกดแป้น Escape ในกล่องโต้ตอบโมดัล คุณสามารถยกเลิกกิจกรรมนี้ได้โดยใช้ event.preventDefault()
  • แอตทริบิวต์ autofocus: ตัวควบคุมแบบฟอร์มแรกในกล่องโต้ตอบโมดัลที่มีแอตทริบิวต์ autofocus (หากมี) จะถูกโฟกัสเมื่อกล่องโต้ตอบแสดงขึ้น หากไม่มีองค์ประกอบดังกล่าว ระบบจะโฟกัสองค์ประกอบที่โฟกัสได้รายการแรก
  • form[method="dialog"]: ใช้ได้ในกล่องโต้ตอบเท่านั้น เมื่อส่งแบบฟอร์ม ระบบจะปิดใช้กล่องโต้ตอบและตั้งค่า dialog.returnValue เป็นค่าของปุ่มส่งที่ใช้

ดูรายละเอียดด้วยการสาธิตการใช้งานจริงและ Polyfill

เปิดใช้งานโดยเปิด "เปิดใช้ฟีเจอร์แพลตฟอร์มเว็บรุ่นทดลอง" ใน chrome://flags/