Onsen UI Dialog CSS Component Basic Alert Dialog

Last Updated : 01 Sep, 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.

Alert Dialog is used to display some warning messages with pop-ups on the webpage. Onsen UI Dialog CSS Component Basic Alert Dialog is used to create the basic alert dialog using the below classes.

Onsen UI Dialog CSS Component Basic Alert Dialog Classes:

alert-dialog-mask: This adds a mask over the whole page around that alert dialog.
alert-dialog: This encloses all the elements which will be considered as the dialog for giving alerts.
alert-dialog-container: This encloses the container which will be considered as the container holding the dialog for giving alerts.
alert-dialog-title: This holds the title for the alert dialog.
alert-dialog-content: This holds the description of the alert.
alert-dialog-footer: This holds the footer of the alert. It might have buttons or some important text.
alert-dialog-button: This class is used to add buttons in an alert dialog.

Syntax:

<div class="alert-dialog-mask"></div>
<div class="alert-dialog">
    <div class="alert-dialog-container">
        <div class="alert-dialog-title">
            ...
        </div>
        <div class="alert-dialog-content">
            ...
        </div>
        ...
    </div>
</div>

Example 1: The following example demonstrates the Onsen UI Dialog CSS Component Basic Alert 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 Component  
              Basic Alert Dialog 
        </h3> 
          
        <div class="alert-dialog-mask"></div> 
        <div class="alert-dialog"> 
            <div class="alert-dialog-container"> 
                <div class="alert-dialog-title"> 
                    GFG Alert.. 
                </div> 
                <div class="alert-dialog-content"> 
                    GeeksforGeeks alert dialog 
                </div> 
            </div> 
        </div> 
    </center> 
</body> 
</html> 

Output:

Example 2: The following example demonstrates the Onsen UI Dialog CSS Component Basic Alert 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 Component Basic Alert Dialog 
        </h3> 
  
        <div class="alert-dialog-mask"></div> 
        <div class="alert-dialog"> 
            <div class="alert-dialog-container"> 
                <div class="alert-dialog-title"> 
                    GFG Alert.. 
                </div> 
                <div class="alert-dialog-content"> 
                    A Computer Science portal for  
                    geeks. It contains well written,  
                    well thought and well explained  
                    computer science and programming articles 
                </div> 
            </div> 
              
            <div class="alert-dialog-footer"> 
                <button class="alert-dialog-button"> 
                    Submit 
                </button> 
                <button class="alert-dialog-button"> 
                    Cancel 
                </button> 
            </div> 
        </div> 
    </center> 
</body> 
</html> 