Onsen UI CSS Component Basic Modal

Last Updated : 23 Jul, 2024

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>

Output:

Reference: https://onsen.io/v2/api/css.html#modal-category

React Suite <Tooltip> Props

triashabiswas

Improve

Article Tags :

Onsen UI CSS Component Basic Modal

Similar Reads

Thank You!

What kind of Experience do you want to share?