W3.CSS - 模態對話方塊

上一個

下一個

W3.CSS 可以用來顯示可自定義模態對話方塊框，而不是標準 JavaScript 警報。

它使用 w3-row 和 w3-col 樣式類分別定義行和列。

序號	類名和描述
1	modal-dialog 表示定義對話方塊框的主父視窗。
2	w3-modal-dialog 表示對話方塊內容容器。
3	w3-modal-content 表示對話方塊內容。

序號

類名和描述

modal-dialog

表示定義對話方塊框的主父視窗。

w3-modal-dialog

表示對話方塊內容容器。

w3-modal-content

表示對話方塊內容。

示例

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://w3schools.tw/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>

結果

驗證結果。

列印頁面

上一個

下一個