W3.CSS - Hộp thoại phương thức
W3.CSS có thể được sử dụng để hiển thị hộp thoại phương thức có thể tùy chỉnh thay vì cảnh báo JavaScript tiêu chuẩn.
Nó sử dụng các lớp kiểu w3-row và w3-col để xác định các hàng và cột tương ứng.
| Sr không. | Tên & Mô tả Lớp học |
|---|---|
| 1 | modal-dialog Đại diện cho cửa sổ cha chính để xác định một hộp thoại. |
| 2 | w3-modal-dialog Đại diện cho vùng chứa nội dung hộp thoại. |
| 3 | w3-modal-content Trình bày nội dung hộp thoại. |
Thí dụ
w3css_modal_dialog.htm
<html>
<head>
<title>The W3.CSS Modal dialog</title>
<meta name = "viewport" content = "width = device-width, initial-scale = 1">
<link rel = "stylesheet" href = "https://www.w3schools.com/lib/w3.css">
</head>
<body class = "w3-container">
<h2>Modal dialog Demo</h2>
<a class = "w3-btn w3-teal" href = "#model-dialog">Open a Modal dialog</a>
<div id = "model-dialog" class = "w3-modal">
<div class = "w3-modal-dialog">
<div class = "w3-modal-content w3-card-8">
<header class = "w3-container w3-teal">
<a href = "#" class = "w3-closebtn">×</a>
<h2>TutorialsPoint</h2>
</header>
<div class = "w3-container">
<p>Hello World!</p>
</div>
<footer class = "w3-container w3-teal">
<p>@TutorialsPoint.COM</p>
</footer>
</div>
</div>
</div>
</body>
</html>Kết quả
Xác minh kết quả.