W3CSS Modal Advanced

In the previous article, we started our discussion about modals. We saw what our essentials components of a modal and how they interact with each other. In this article, we shall see how to create a modal with header and footer content, how to create card modal and how to create image modal. So, let the fun begin.

Modal with Header and Footer

To create a Modal with header and footer, the rest of the process is similar. You have an event source, a w3-modal which acts as a container class and w3-modal-content class. Inside the div with class w3-modal-content class, create a header element for header content, followed by a simple div which acts a content. Finally, add a footer element for footer of the modal. You can style the header,content and footer element the way you want. Take a look at the following example to see modal with header and content in action.

<!doctype html>
<html>

<head>

<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
    
</head>
    
<body>

<div class="w3-container">
  <h2>W3.CSS Modal</h2>
  <div onclick="document.getElementById('Modal1').style.display='block'" class="w3-blue w3-xlarge">Click to open Modal</div>

  <div id="Modal1" class="w3-modal">
    <div class="w3-modal-content">
      
        <header class="w3-container w3-orange"> 
        <span onclick="document.getElementById('Modal1').style.display='none'" 
        class="w3-button w3-display-topright">&times;</span>
        <h2>This is the header</h2>
      </header>
      <div class="w3-container">
        <p>Welcome to knowledge hills.</p>
        <p>Best tutorial site</p>
      </div>
      <footer class="w3-container w3-pink">
        <p>Copyright @ Knowledgehills.com</p>
      </footer>
        
    </div>
  </div>
</div>
    

</body>
    
</html>

Download the code Try the code

Modal as Cards

Like all the other elements, you can also give a card like look to a modal. To do so, simply add w3-card-number class to the div with class w3-modal-content. This gives a card like look to the modal window. Take a look at the following example.

<!doctype html>
<html>

<head>

<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
    
</head>
    
<body>

<div class="w3-container">
  <h2>W3.CSS Modal</h2>
  <div onclick="document.getElementById('Modal1').style.display='block'" class="w3-blue w3-xlarge">Click to open Modal</div>

  <div id="Modal1" class="w3-modal">
    <div class="w3-modal-content w3-card-8">
      
        <header class="w3-container w3-orange"> 
        <span onclick="document.getElementById('Modal1').style.display='none'" 
        class="w3-button w3-display-topright">&times;</span>
        <h2>This is the header</h2>
      </header>
      <div class="w3-container">
        <p>Welcome to knowledge hills.</p>
        <p>Best tutorial site</p>
      </div>
      <footer class="w3-container w3-pink">
        <p>Copyright @ Knowledgehills.com</p>
      </footer>
        
    </div>
  </div>
</div>
    

</body>
    
</html>

Download the code Try the code

Image Modal

Another very useful use of modal is developing an image gallery where images are initially shown in the small sizes. When a user clicks the image, they are displayed in the form of modal in a larger size. To create image modal, the rest of the process is similar. Simply replace the source which is usually a button or link with the image. The size of the image should be smaller. Then add the actual larger image inside the div with class w3-modal-content window. Bind the onclick event of the small image with this modal. Now, when you click the small window. A modal with image of larger size shall display. Take a look at the following code:

<!doctype html>
<html>

<head>

<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
    
</head>
    
<body>


<div class="w3-container">
  <h2>Modal Image Example</h2>
  <p>Click the Image to Display It in the form of Modal</p>

  <img src="http://images.freeimages.com/images/previews/d39/machinegun-1313031.jpg" style="width:30%;cursor:zoom-in"
  onclick="document.getElementById('Modal1').style.display='block'">
    
    </div>

  <div id="Modal1" class="w3-modal" onclick="this.style.display='none'">
    <span class="w3-button w3-hover-blue w3-xlarge w3-display-topright">&times;</span>
    <div class="w3-modal-content w3-animate-zoom">
      <img src="http://images.freeimages.com/images/previews/d39/machinegun-1313031.jpg" style="width:100%">
    </div>
  </div>
</div>
    
    
    

</body>
    
</html>

Download the code Try the code

<<< W3CSS ModalW3CSS Tooltip >>>