ออบเจ็กต์ HTML DOM Dialog เชื่อมโยงกับองค์ประกอบ HTML5 ใช้สำหรับสร้างป๊อปอัป โมดอล ฯลฯ บนหน้าเว็บ ในการดูกล่องโต้ตอบและให้ผู้ใช้โต้ตอบกับกล่องโต้ตอบ ควรตั้งค่าแอตทริบิวต์เปิดไว้ คุณสมบัติ ต่อไปนี้เป็นคุณสมบัติของวัตถุไดอะล็อก - คุณสมบัติ คำอธิบาย เปิด การตั้งค่าหรือย้อนกลับว่าควรเปิดกล่องโต้ตอบหรือไม่ ผลตอบแทน การตั้งค่าหรือคืนค่าส่งคืนของกล่องโต้ตอบ วิธีการ ต่อไปนี้เป็นวิธีการสำหรับวัตถุ Dialog - วิธีการ คำอธิบาย close() เพื่อปิดกล่องโต้ตอบ show() เพื่อแสดงกล่องโต้ตอบ showModal() เพื่อสร้างกล่องโต้ตอบบนสุดและแสดงมัน ไวยากรณ์ ต่อไปนี้เป็นไวยากรณ์สำหรับ − การสร้างวัตถุโต้ตอบ - var p = document.createElement("DIALOG"); ตัวอย่าง ให้เราดูตัวอย่างสำหรับวัตถุโต้ตอบ HTML DOM - <!DOCTYPE html> <html> <head> <title>DIALOG OBJECT</title> <style> dialog{ border:2px solid blue; font-weight:bold; } </style> </head> <body> <p> Clicking on the button below will create a dialog element</p> <button onclick="createDialog()">CREATE</button> <script> function createDialog() { var dlg = document.createElement("DIALOG"); var dlgTxt = document.createTextNode("DIALOG WINDOW with a button"); var bl=document.createElement("BR"); var btn = document.createElement("BUTTON"); var btnText=document.createTextNode("CLICK HERE"); dlg.setAttribute("open", "open"); dlg.appendChild(dlgTxt); dlg.appendChild(bl); btn.appendChild(btnText); dlg.appendChild(btn); document.body.appendChild(dlg); } </script> </body> </html> ผลลัพธ์ สิ่งนี้จะสร้างผลลัพธ์ต่อไปนี้ - เมื่อคลิกปุ่มสร้าง - ในตัวอย่างข้างต้น − ขั้นแรกเราได้สร้างปุ่ม CREATE ซึ่งจะรันฟังก์ชัน createDialog() เมื่อผู้ใช้คลิก - <button onclick="createDialog()">CREATE</button> ฟังก์ชัน createDialog() สร้าง องค์ประกอบโดยใช้เมธอด createElement() จากนั้นจะเพิ่มข้อความโดยใช้เมธอด createTextNode() จากนั้นเราจะสร้างปุ่มภายในองค์ประกอบ โดยใช้เมธอด createElement() และเพิ่มข้อความของปุ่มโดยใช้เมธอด createTextNode() การใช้เมธอด setAttribute() เราตั้งค่าแอตทริบิวต์เปิดของกล่องโต้ตอบเพื่อแสดงให้ผู้ใช้เห็น ในที่สุดกล่องโต้ตอบพร้อมกับปุ่มข้างในจะถูกผนวกเข้ากับเนื้อหาของเอกสารโดยใช้เมธอด document.body appendChild() และส่งผ่านองค์ประกอบ และ เป็นพารามิเตอร์ - function createDialog() { var dlg = document.createElement("DIALOG"); var dlgTxt = document.createTextNode("DIALOG WINDOW with a button"); var bl=document.createElement("BR"); var btn = document.createElement("BUTTON"); var btnText=document.createTextNode("CLICK HERE"); dlg.setAttribute("open", "open"); dlg.appendChild(dlgTxt); dlg.appendChild(bl); btn.appendChild(btnText); dlg.appendChild(btn); document.body.appendChild(dlg); }