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ả.