ออบเจ็กต์ Dialog ใน HTML DOM

ออบเจ็กต์ Dialog ใน HTML DOM เกี่ยวข้องกับองค์ประกอบ HTML5 <dialog> ใช้สำหรับสร้างป๊อปอัป (popup), โมดัล (modal) ฯลฯ บนหน้าเว็บ เพื่อให้ผู้ใช้เห็นและโต้ตอบกับกล่องโต้ตอบ ต้องตั้งค่าคุณสมบัติ open

คุณสมบัติ (Properties)

เมธอด (Methods)

ไวยากรณ์ (Syntax)

การสร้างออบเจ็กต์ dialog:

var dialogElement = document.createElement("DIALOG");

ตัวอย่าง

ตัวอย่างการสร้างกล่องโต้ตอบ (dialog) พร้อมปุ่มภายใน:

<!DOCTYPE html>
<html>
<head>
<style>
  dialog {
    border: 2px solid blue;
    font-weight: bold;
    padding: 20px;
  }
</style>
</head>
<body>
<p>คลิกปุ่มด้านล่างเพื่อสร้างกล่องโต้ตอบ</p>
<button onclick="createDialog()">CREATE</button>
<script>
  function createDialog() {
    var dlg = document.createElement("DIALOG");
    var dlgText = document.createTextNode("DIALOG WINDOW with a button");
    var br = document.createElement("BR");
    var btn = document.createElement("BUTTON");
    var btnText = document.createTextNode("CLICK HERE");
    
    dlg.setAttribute("open", "open");
    dlg.appendChild(dlgText);
    dlg.appendChild(br);
    btn.appendChild(btnText);
    dlg.appendChild(btn);
    document.body.appendChild(dlg);
  }
</script>
</body>
</html>

ผลลัพธ์

เมื่อโหลดหน้าเว็บจะแสดงปุ่ม "CREATE"

เมื่อคลิกปุ่ม จะแสดงกล่องโต้ตอบ (dialog) พร้อมข้อความ "DIALOG WINDOW with a button" และปุ่ม "CLICK HERE" ภายใน

คำอธิบายโค้ด

• สร้างปุ่ม "CREATE" เรียกใช้ createDialog() เมื่อคลิก
• ฟังก์ชัน createDialog() สร้าง <dialog> เก็บใน dlg
• เพิ่มข้อความด้วย createTextNode() แล้วผูกกับ dialog
• สร้าง <br> และ <button> พร้อมข้อความ "CLICK HERE"
• ตั้งค่า open attribute เป็น "open" เพื่อแสดง dialog ทันที
• ต่อท้ายองค์ประกอบทั้งหมดเข้า <body>