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

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

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

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

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

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

ดูรายละเอียดด้วยเดโมแบบเรียลไทม์และ polyfill

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