Đối tượng HTML DOM Dialog được liên kết với phần tử HTML5
Thuộc tính
Sau đây là các thuộc tính cho đối tượng Hộp thoại -
| Thuộc tính | Mô tả |
|---|---|
| mở | Để đặt hoặc quay lại xem hộp thoại có nên được mở hay không. |
| returnValue | Để đặt hoặc trả về giá trị trả về của hộp thoại. |
Phương pháp
Sau đây là các phương thức cho đối tượng Hộp thoại -
| Phương pháp | Mô tả |
|---|---|
| close () | Để đóng hộp thoại. |
| show () | Để hiển thị hộp thoại. |
| showModal () | Để tạo và hiển thị hộp thoại trên cùng. |
Cú pháp
Sau đây là cú pháp cho -
Tạo đối tượng hộp thoại -
var p = document.createElement("DIALOG"); Ví dụ
Hãy để chúng tôi xem xét một ví dụ cho đối tượng hộp thoại 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> Đầu ra
Điều này sẽ tạo ra kết quả sau -
Khi nhấp vào nút TẠO -
Trong ví dụ trên -
Đầu tiên chúng tôi đã tạo một nút CREATE sẽ thực thi hàm createDialog () khi người dùng nhấp vào -
<button onclick="createDialog()">CREATE</button>
Hàm createDialog () tạo phần tử
Sử dụng phương thức setAttribute (), chúng tôi đặt giá trị thuộc tính mở của hộp thoại để hiển thị cho người dùng. Cuối cùng hộp thoại cùng với nút bên trong nó được thêm vào nội dung tài liệu bằng phương thức document.body appendChild () và chuyển phần tử
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);
}