Đối tượng HTML DOM Dialog

Đối tượng Dialog trong HTML DOM đại diện cho phần tử <dialog> (HTML5), dùng để tạo hộp thoại popup, modal trên trang web. Để hiển thị hộp thoại và cho phép người dùng tương tác, thuộc tính open phải được thiết lập.

Thuộc tính

Phương thức

Cú pháp

Tạo đối tượng dialog:

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

Ví dụ

Ví dụ tạo động một hộp thoại chứa văn bản và nút bấm:

<!DOCTYPE html>
<html>
<head>
<style>
  dialog {
    border: 2px solid blue;
    font-weight: bold;
    padding: 10px;
  }
</style>
</head>
<body>
<p>Nhấn nút bên dưới để tạo hộp thoại dialog</p>
<button onclick="createDialog()">TẠO</button>
<script>
  function createDialog() {
    var dlg = document.createElement("DIALOG");
    var dlgText = document.createTextNode("CỬA SỔ DIALOG VỚI MỘT NÚT BẤM");
    var br = document.createElement("BR");
    var btn = document.createElement("BUTTON");
    var btnText = document.createTextNode("BẤM VÀO ĐÂY");
    dlg.setAttribute("open", "open");
    dlg.appendChild(dlgText);
    dlg.appendChild(br);
    btn.appendChild(btnText);
    dlg.appendChild(btn);
    document.body.appendChild(dlg);
  }
</script>
</body>
</html>

Kết quả

Ban đầu chỉ có nút "TẠO".

Sau khi nhấn, một hộp thoại dialog viền xanh, chữ đậm xuất hiện với nội dung "CỬA SỔ DIALOG VỚI MỘT NÚT BẤM" và nút "BẤM VÀO ĐÂY" bên trong.

Giải thích

• Nút "TẠO" gọi hàm createDialog().
• Hàm tạo <dialog>, nút văn bản, thẻ <br>, nút <button> và văn bản nút.
• Đặt thuộc tính open="open" để hiển thị dialog ngay lập tức.
• Gắn các phần tử con vào dialog, cuối cùng gắn dialog vào body.