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

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/