Onsen UI Dialog CSS Components

Last Updated : 05 Jul, 2022

Onsen UI CSS is used to create beautiful HTML components. It is one of the most efficient ways to create HTML5 hybrid components that are compatible with both mobile and desktop.

A Dialog is a type of modal window which appears in front of app content to provide critical information(i.e. warning messages) or ask for a decision with pop-ups on the webpage. Onsen UI provides 2 kinds of dialog i.e. basic dialog & material dialog, to create an attractive dialog that helps to enhance the overall user experience on the website.

Onsen UI Dialog CSS Components Classes:

Basic Dialog: This component provides the class that is used to create the basic dialog.
Material Dialog: This component provides the class that is used to create the material dialog box, to provide important information to the user.

Syntax:

<element-name class="Dialog-Component-Class">...</element-name>

Example 1: In the below code example, we will make use of the Onsen UI Dialog classes to demonstrate the use of dialog.

HTML

<!DOCTYPE html>
<html>
 
<head>
    <!-- CDN links of Onsen UI library -->
    <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>
</head>
 
<body>
    <center>
        <h1 style="color: green;">
            GeeksforGeeks
        </h1>
        <h3>
            Onsen UI Dialog CSS Components
        </h3>
        <div class="dialog-mask"></div>
        <div class="dialog">
            <div class="dialog-container">
                <p style="text-align:center;
                          margin-top:40px;">
                    Content
                </p>
 
            </div>
        </div>
    </center>
</body>
</html>

Output:

Example 2: In the below code example, we will make use of the Dialog classes to demonstrate the use of dialog.

HTML

<!DOCTYPE html>
<html>
 
<head>
    <!-- CDN links of Onsen UI library -->
    <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>
</head>
 
<body>
    <center>
        <h1 style="color: green;">
            GeeksforGeeks
        </h1>
        <h3>
            Onsen UI Dialog CSS Components
        </h3>
        <div class="dialog-mask">
            <div class="dialog">
                <div class="dialog-container">
                    <p style="text-align:center;">
                        GeeksforGeeks
                    </p>
 
 
                    <p style="text-align:center;">
                        A computer science portal for geeks
                    </p>
 
                </div>
            </div>
        </div>
    </center>
</body>
</html>