Onsen UI CSS Component Basic Modal

Last Updated : 23 Jun, 2022

Onsen UI is a free open-source HTML5 framework that enables you to design user interfaces that are original and functional (UI). It also makes UI creation easier, freeing up programmers to focus on the functionality of the application. With a wealth of ready-to-use features that follow native iOS and Android design standards, Onsen UI is a comprehensive collection of user interface elements made specifically for mobile apps. Onsen UI can be used with any other framework, including jQuery, even though it was created to work with AngularJS. For PhoneGap and Cordova, Onsen UI is a JavaScript Framework.

Onsen UI provides the pre-built CSS components for fast designing versatile and appealing user interface layouts. Onsen CSS Components is a web-based Topcoat theme roller for mobile developers that makes creating beautiful UI’s easier for developers.

A Basic Modal is a type of pop-up window that can be used to show some information or display a message. It mostly is used to give feedback about the activity of the user.

Onsen UI CSS Component Basic Modal Classes:

modal: This class is added to the container that holds the modal.
modal__content: This class is added to the container that encloses the whole modal’s content.

Syntax:

<div class="modal">
  <div class="modal__content">
    Modal's Content
  </div>
</div>

Example 1: The below example demonstrate how to add a basic modal to a webpage using Onsen UI.

HTML

<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
    <meta charset="UTF-8" /> 
    <meta name="viewport" 
          content="width=device-width,  
                   initial-scale=1.0" /> 
    <link rel="stylesheet" href= 
"https://unpkg.com/onsenui/css/onsenui.css" /> 
    <link rel="stylesheet" href= 
"https://unpkg.com/onsenui/css/onsen-css-components.min.css" /> 
</head> 
  
<body> 
    <center> 
        <h1 style="color: green;"> 
            GeeksforGeeks 
        </h1> 
        <h3 style="font-style: bold;"> 
            Onsen UI CSS Component Basic Modal 
        </h3> <br> 
    </center> 
    <div class="modal"> 
        <div class="modal__content"> 
            <div style="height: 200px; 
                        width: 600px;  
                        margin-left: 3.5rem;"> 
                <div class="card"> 
                    <h2 class="card__title" 
                        style="color: green;  
                               text-align: center;"> 
                        GeeksforGeeks 
                    </h2> 
                    <div class="card__content"> 
                        A Computer Science portal for geeks. 
                        Gain and share your knowledge & skills  
                        with a variety of learning platforms offe 
                        red by GeeksforGeeks. Billions of Users, 
                        Millions of Articles Published, Thousands 
                        Got Hired by Top Companies and the numbers  
                        are still growing. We provide a variety of  
                        services for you to learn, thrive and also  
                        have fun! 
                    </div> 
                </div> 
            </div> 
        </div> 
    </div> 
</body> 
</html>

Output:

Example 2: In the example, some simple JavaScript logic is used to create a button that will open or close the modal.

HTML

<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
    <meta charset="UTF-8" /> 
    <meta name="viewport" 
          content="width=device-width,  
                   initial-scale=1.0" /> 
    <link rel="stylesheet" href= 
"https://unpkg.com/onsenui/css/onsenui.css" /> 
    <link rel="stylesheet" href= 
"https://unpkg.com/onsenui/css/onsen-css-components.min.css" /> 
    <script src= 
"https://unpkg.com/onsenui/js/onsenui.min.js"> 
    </script> 
    <script src= 
"https://code.jquery.com/jquery-3.6.0.min.js"> 
    </script> 
</head> 
  
<body> 
    <center> 
        <h1 style="color: green;"> 
            GeeksforGeeks 
        </h1> 
        <h3 style="font-style: bold;"> 
            Onsen UI CSS Component Basic Modal 
        </h3> 
        <br> 
        <button class="button" 
                onclick="showModal()"> 
            Open the modal.  
        </button> 
    </center> 
    <div class="modal"> 
        <div class="modal__content"> 
            <div style="height: 200px;  
                        width: 600px;  
                        margin-left: 5.5rem;"> 
                <div class="card"> 
                    <h2 class="card__title" 
                        style="color: green;  
                               text-align: center;"> 
                        GeeksforGeeks 
                    </h2> 
                    <div class="card__content"> 
                        A Computer Science portal for geeks. 
                        Gain and share your knowledge & skills 
                        with a variety of learning platforms offered 
                        by GeeksforGeeks. Billions of Users, Millions 
                        of Articles Published, Thousands Got Hired by  
                        Top Companies and the numbers are still growing. 
                        We provide a variety of services for you to  
                        learn, thrive and also have fun! 
                    </div> 
                    <button onclick="closeModal()" 
                            class="action-sheet-button">  
                        <i class="ion-ios-close"></i>  
                            Close  
                    </button> 
                </div> 
            </div> 
        </div> 
    </div> 
    <script> 
        $('.button').hide() 
      
        function closeModal() { 
            $('.modal').hide() 
            $('.button').show() 
        } 
      
        function showModal() { 
            $('.modal').show() 
            $('.button').hide() 
        } 
    </script> 
</body> 
</html>