วิธีกำหนดกล่องโต้ตอบ (Dialog Box) ใน HTML

ใช้แท็ก <dialog> เพื่อกำหนดกล่องโต้ตอบ (dialog box) ใน HTML แท็กนี้เป็นส่วนหนึ่งของ HTML5.1+ และรองรับในเบราว์เซอร์สมัยใหม่

แอตทริบิวต์

แอตทริบิวต์	ค่า	คำอธิบาย
open	open	เปิดกล่องโต้ตอบและผู้ใช้โต้ตอบได้

ตัวอย่าง

คุณสามารถลองรันโค้ดต่อไปนี้เพื่อเรียนรู้การทำงานกับแท็ก <dialog>:

<!Doctype html> 
<html> 
  <head> 
    <title>HTML dialog Tag</title> 
  </head> 
  <body> 
    <h3>Tutorialspoint</h3> 
    <p>เราให้บริการบทเรียน, ควิซ, วิดีโอการเรียนรู้ ฯลฯ</p> 
    <dialog open>บทเรียนฟรีสำหรับทุกคน</dialog> 
  </body> 
</html>

JavaScript API สำคัญ:

dialog.show() - แสดง dialog (non-modal)
dialog.showModal() - แสดง dialog แบบ modal (บล็อกการโต้ตอบส่วนอื่น)
dialog.close([returnValue]) - ปิด dialog
dialog.open - boolean property ตรวจสอบสถานะ
dialog.returnValue - ค่าที่ส่งคืนเมื่อปิด

เหตุการณ์: close (เมื่อปิด), cancel (กด Esc ใน modal)

CSS: ใช้ ::backdrop pseudo-element จัดสไตล์พื้นหลัง modal overlay