HTML5: <dialog>
Giải phóng thời gian, khai phóng năng lực
Phần tử <dialog> dùng để tạo một hộp thoại hoặc một thành phần tương tác như inspector hay window.
Bạn có thể tích hợp các phần tử của form vào <dialog> bằng cách sử dụng thuộc tính method="dialog" của thẻ <form>. Khi form được submit thì hộp thoại sẽ được đóng lại và thuộc tính returnValue sẽ thiết lập giá trị cho nút lệnh Submit.
Bạn cũng có thể sử dụng phần tử giả của CSS là ::backdrop để định kiểu cho phần phía sau phần tử <dialog>, chẳng hạn như làm mờ phần nội dung không thể tiếp cận trong khi hộp thoại modal đang hoạt động.
Thuộc tính:
Mặc định, hộp thoại được tạo bởi <dialog> ở trạng thái đóng. Nếu bạn muốn nó ở trạng thái mở bạn sử dụng thuộc tính open.
Ví dụ:
<dialog open>
<p>V1Study</p>
</dialog>
Lưu ý:
Phần tử <dialog> đang trong quá trình thử nghiệm, vì vậy cần kiểm tra tính tương thích của phần tử khác nhau. Cũng lưu ý rằng các cú pháp và hành vi của <dialog> có thể thay đổi trong các phiên bản trình duyệt tương lai.
Thuộc tính tabindex không dùng được trên phần tử <dialog>.
Ví dụ:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<!-- Simple pop-up dialog box, containing a form -->
<dialog id="favDialog">
<form method="dialog">
<section>
<p><label for="favAnimal">Favorite animal:</label>
<select id="favAnimal" name="favAnimal">
<option></option>
<option>Brine shrimp</option>
<option>Red panda</option>
<option>Spider monkey</option>
</select></p>
</section>
<menu>
<button id="cancel" type="reset">Cancel</button>
<button type="submit">Confirm</button>
</menu>
</form>
</dialog>
<menu>
<button id="updateDetails">Update details</button>
</menu>
<script>
(function() {
var updateButton = document.getElementById( 'updateDetails');
var cancelButton = document.getElementById( 'cancel');
// Update button opens a modal dialog
updateButton.addEventListener( 'click', function() {
document.getElementById( 'favDialog').showModal();
});
// Form cancel button closes the dialog box
cancelButton.addEventListener( 'click', function() {
document.getElementById( 'favDialog').close();
});
})();
</script>
</body>
</html>
Giải phóng thời gian, khai phóng năng lực