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

Eiji Kitamura

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/