Onsen UI Dialog CSS Component Basic Alert Dialog

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.

Output:

👁 Image

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

Output:

👁 Image

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