Thursday, March 16, 2017

W3.CSS - Modal Dialog

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.
Class NameDescription
modal-dialogRepresents the main parent window to define a dialog box.
w3-modal-dialogRepresents the dialog content container.
w3-modal-contentRepresents 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">
      <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>

Result

Verify the result.
Labels:

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)