Onsen UI Modal CSS Components

Last Updated : 07 Jul, 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 UI Modal CSS Components is a web-based Topcoat theme roller for mobile developers that makes creating a beautiful user interface easier for developers.

Syntax:

<element-name class="modal-class-name">...</element-name>

Classes Used:

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.

Example1: The below example demonstrates 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 Modal CSS Components 
        </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" 
                         style="text-align: center;"> 
                        A Computer Science portal for geeks.                     
                    </div> 
                </div> 
            </div> 
        </div> 
    </div> 
</body> 
</html>

Output:

Example 2: The below example demonstrates how to add a basic modal to a webpage using Onsen UI by specifying the toggle to 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 Modal CSS Components 
        </h3> 
        <br> 
        <button class="button"
                onclick="showModal()"> 
            Click here!! 
        </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"
                         style="text-align: center;"> 
                        A Computer Science portal for geeks.                     
                    </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>