Thẻ dialog trong HTML

• Bùi Tấn Lực
• 24
• 28/09/2025

Thẻ dialog trong HTML dùng để hiện nội dung của cửa sổ hộp thoại mở, mặc định sẽ không vô hiệu hóa các phần tử khác, chi tiết như nào hãy cùng chúng tôi phân tích:

Thẻ dialog trong HTML

Chức năng của Thẻ dialog trong HTML

Thẻ dialog trong HTML dùng để hiện nội dung của cửa sổ hộp thoại mở, mặc định sẽ không vô hiệu hóa các phần tử khác nhưng kết hợp với javascript sẽ vô hiệu hóa được các phần tử khác, bạn có thể dùng javascript để đóng cửa sổ hộp thoại mở.

Code Thẻ dialog trong HTML

Thẻ dialog mặc định trong HTML

Thuộc tính open cho phép mở hộp thoại:

<dialog open>Nội dung cửa sổ hộp thoại mở</dialog>

Chạy Thử

Thẻ dialog kết hợp javascript trong HTML

<dialog >
      <!-- Nội dung của hộp thoại -->
      <p>Nội dung cửa sổ hộp thoại mở.</p>
      <button>Đóng</button>
</dialog>
<p>Thẻ dialog mặc định trong HTML</p>
<script>
const myDialog = document.querySelector('dialog');
const showButton = document.querySelector('button'); // Giả định có một nút để mở hộp thoại
myDialog.showModal(); // Hiện hộp thoại và vô hiệu hóa các phần tử khác
// Hoặc myDialog.show(); Hiện hộp thoại và không vô hiệu hóa các phần tử khác
const closeButton = myDialog.querySelector('button'); // Giả định có nút đóng bên trong dialog
closeButton.addEventListener('click', () => {
      myDialog.close();
});
</script>

Chạy Thử

Lời kết

Cảm ơn các bạn đã tham khảo bài viết Thẻ dialog trong HTML.

Bùi Tấn Lực

Chia sẻ nội dung đánh giá của bạn về Thẻ dialog trong HTML
Email, Điện thoại của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *

Đăng ký tư vấn miễn phí

Tìm hiểu 1 năm không bằng lắng nghe 1 câu tư vấn