Thẻ <dialog> trong HTML

1) Thẻ <dialog> trong HTML

- Thẻ <dialog> được dùng để tạo một hộp thoại.

Ví dụ:

<!DOCTYPE html>
<html>
<body>
    <div>TÀI LIỆU HƯỚNG DẪN HỌC HTML</div>
    <div>TÀI LIỆU HƯỚNG DẪN HỌC HTML</div>
    <dialog open>CHÀO MỪNG CÁC BẠN THAM GIA KHÓA HỌC</dialog>
    <div>Tài liệu hướng dẫn học CSS từ cơ bản đến nâng cao</div>
    <div>Tài liệu hướng dẫn học CSS từ cơ bản đến nâng cao</div>
    <div>Tài liệu hướng dẫn học CSS từ cơ bản đến nâng cao</div>
    <div>Tài liệu hướng dẫn học CSS từ cơ bản đến nâng cao</div>
    <div>Tài liệu hướng dẫn học CSS từ cơ bản đến nâng cao</div>
    <div>Tài liệu hướng dẫn học CSS từ cơ bản đến nâng cao</div>
</body>
</html>

Khi đó, màn hình trình duyệt sẽ hiển thị:

TÀI LIỆU HƯỚNG DẪN HỌC HTML

Tài liệu hướng dẫn học CSS từ cơ bản đến nâng cao

Xem ví dụ

- Lưu ý: Thuộc tính open xác định hộp thoại sẽ được hiển thị. Cho nên ta có thể kết hợp với JavaScript để thêm (xóa) thuộc tính open cũng như việc hiện (ẩn) hộp thoại.

Ví dụ:

<!DOCTYPE html>
<html>
<body>
    <div>TÀI LIỆU HƯỚNG DẪN HỌC HTML</div>
    <div>TÀI LIỆU HƯỚNG DẪN HỌC HTML</div>
    <dialog id="hopthoai">CHÀO MỪNG CÁC BẠN THAM GIA KHÓA HỌC</dialog>
    <div>Tài liệu hướng dẫn học CSS từ cơ bản đến nâng cao</div>
    <div>Tài liệu hướng dẫn học CSS từ cơ bản đến nâng cao</div>
    <div>Tài liệu hướng dẫn học CSS từ cơ bản đến nâng cao</div>
    <div>Tài liệu hướng dẫn học CSS từ cơ bản đến nâng cao</div>
    <div>Tài liệu hướng dẫn học CSS từ cơ bản đến nâng cao</div>
    <div>Tài liệu hướng dẫn học CSS từ cơ bản đến nâng cao</div>
    <button type="button" onclick="myFunction()">BẤM VÀO ĐÂY</button>
    <script>
        function myFunction(){
            var x = document.getElementById("hopthoai");
            if(x.open == true){
                x.open = false;
            }else{
                x.open = true;
            }
        }
    </script>
</body>
</html>

Xem ví dụ

2) Định dạng CSS mặc định

- Hầu hết các trình duyệt sẽ hiển thị phần tử <dialog> với định dạng CSS như sau:

dialog {
    position: absolute;
    left: 0px;
    right: 0px;
    width: -webkit-fit-content;
    height: -webkit-fit-content;
    color: black;
    margin: auto;
    border-width: initial;
    border-style: solid;
    border-color: initial;
    border-image: initial;
    padding: 1em;
    background: white;
}