Skip to content
Related Articles

Related Articles

W3.CSS Model
  • Last Updated : 02 Mar, 2021
GeeksforGeeks - Summer Carnival Banner

In simple words, the Modal component is a dialogue box/popup window that displayed on top of the current page, once the trigger button is clicked. It must be kept in mind that W3.CSS doesn’t support nested modals as they create a bad UI experience for the user. Therefore, only one modal window is supported at a time. W3.CSS has two model classes to create and add content in the model window. And it must be noted that we have to add a close button as the model in W3.CSS doesn’t come with one.

Sr. No.

Model Class

Description

1.



w3-modal

It defines the model container.

2.

w3-modal-content

It defines the content of the model.

Follow the example below to learn how to create a model using W3.CSS:

Example:

HTML




<!DOCTYPE html>
<html>
  
<head>
    <!-- Title of the page -->
    <title>GeeksForGeeks</title>
  
    <!-- Adding W3.CSS file through external link -->
    <link rel="stylesheet" href=
</head>
  
<body>
    <!-- w3-container is used to add 16px
         padding to any HTML element.  -->
    <!-- w3-center is used to set the content
         of the element to the center. -->
    <div class="w3-container w3-center">
  
        <!-- w3-text-green sets the text 
            colour to green. -->
        <!-- w3-xxlarge sets font size to 32px. -->
        <h2 class="w3-text-green w3-xxlarge">
            GeeksForGeeks
        </h2>
    </div>
  
    <!-- Model in W3.CSS -->
    <div class="w3-container w3-center w3-text-red">
  
        <!-- Model Open Button -->
        <button onclick="document.getElementById('geek')
            .style.display='block'" class="w3-text-white 
            w3-button w3-orange w3-hover-red w3-round">
            Open Modal
        </button>
  
        <!-- Model Content -->
        <div id="geek" class="w3-modal">
            <div class="w3-modal-content">
                <!-- Model Header -->
                <!-- Model Close Button in the heading-->
                <header class="w3-container 
                    w3-white w3-text-green">
                      
                    <span onclick="document.getElementById(
                        'geek').style.display='none'
                        class="w3-button w3-display-topright 
                        w3-white w3-text-gray w3-hover-red">
                        ×
                    </span>
                    <h3>GeeksForGeeks</h3>
                </header>
  
                <!-- Model Content -->
                <div class="w3-container">
  
                    <p>
                        Articles that need little modification/
                        improvement from reviewers are published
                        first. To quickly get your articles 
                        reviewed, please refer existing articles, 
                        their formating style, coding style, 
                        and try to make your close to them.
                    </p>
                </div>
  
                <!-- Model Footer -->
                <footer class="w3-container w3-white">
                    <button class="w3-margin w3-round w3-right 
                        w3-blue w3-button w3-hover-blue" 
                        onclick="document.getElementById('geek')
                        .style.display='none'">
                        Okay
                    </button>
                      
                    <button class="w3-margin w3-round w3-right 
                        w3-red w3-button w3-hover-red" 
                        onclick="document.getElementById('geek')
                        .style.display='none'">
                        Close
                    </button>
                </footer>
            </div>
        </div>
    </div>
</body>
  
</html>

Output:

Before launching the Modal:

After launching the Modal:


Attention reader! Don’t stop learning now. Get hold of all the important DSA concepts with the DSA Self Paced Course at a student-friendly price and become industry ready.

My Personal Notes arrow_drop_up
Recommended Articles
Page :