ออบเจ็กต์ 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() สร้าง
การใช้เมธอด 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);
} 