Onsen UI Dialog CSS Component Alert Dialog without Title

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 Alert Dialog without Title is used to create the alert dialog box without the title using the below classes.

Onsen UI Dialog CSS Component Alert Dialog without Title 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-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-content">
            ...
        </div>
        ...
    </div>
</div>

Example 1: The following example demonstrates the Onsen UI Dialog CSS Component Alert Dialog without Title.

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 Alert  
              Dialog without Title 
        </h3> 
          
        <div class="alert-dialog-mask"></div> 
        <div class="alert-dialog"> 
            <div class="alert-dialog-container"> 
                <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 Alert Dialog without Title.

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 Alert  
              Dialog without Title 
        </h3> 
          
        <div class="alert-dialog-mask"></div> 
        <div class="alert-dialog"> 
            <div class="alert-dialog-container"> 
                <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> 