VOOZH about

URL: https://www.geeksforgeeks.org/css/onsen-ui-dialog-css-component-alert-dialog-without-title/

⇱ Onsen UI Dialog CSS Component Alert Dialog without Title - GeeksforGeeks


  • Courses
  • Tutorials
  • Interview Prep

Onsen UI Dialog CSS Component Alert Dialog without Title

Last Updated : 23 Jul, 2025

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.

Output:

👁 Image
 

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

Output:

👁 Image
 

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

Comment