<!DOCTYPE html>
<html>
<head>
<title>Thẻ dialog kết hợp javascript trong HTML</title>
</head>
<body>
<h1>Thẻ dialog kết hợp javascript trong HTML</h1>
<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>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>Thẻ dialog kết hợp javascript trong HTML</title>
</head>
<body>
<h1>Thẻ dialog kết hợp javascript trong HTML</h1>
<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>
</body>
</html>
