English 中文(简体)
W3.CSS Tutorial

Selected Reading

W3.CSS - Modal Dialog
  • 时间：2024-09-17

W3.CSS - Modal Dialog

Previous Page Next Page  

W3.CSS can be used to display a customizable modal dialog box instead of the standard JavaScript alert.

It uses w3-row and w3-col style classes to define rows and columns respectively.

Sr. No. Class Name & Description
1

modal-dialog

Represents the main parent window to define a dialog box.
2

w3-modal-dialog

Represents the dialog content container.

3

w3-modal-content

Represents dialog contents.

Example

w3css_modal_dialog.htm

<html>
   <head>
      <title>The W3.CSS Modal dialog</title>
      <meta name = "viewport" content = "width = device-width, initial-scale = 1">
      <pnk rel = "stylesheet" href = "https://www.w3schools.com/pb/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>
      <span id = "model-dialog" class = "w3-modal">
         <span class = "w3-modal-dialog">
            <span class = "w3-modal-content w3-card-8">
               <header class = "w3-container w3-teal">
                  <a href = "#" class = "w3-closebtn">×</a>
                  <h2>TutorialsPoint</h2>
               </header>
               <span class = "w3-container">
                  <p>Hello World!</p>
               </span>
               <footer class = "w3-container w3-teal">
                  <p>@TutorialsPoint.COM</p>
               </footer>
            </span>
         </span>
      </span>
   </body>
</html>

Result

Verify the result.