Onsen UI Alert Dialog CSS Components

Last Updated : 19 Jul, 2022

Onsen UI is a free HTML5 framework that enables you to create unique and practical user interfaces (UI). It also makes UI development simpler, freeing programmers to concentrate on the essential aspects of the project. Onsen UI is a sophisticated collection of user interface elements created especially for mobile apps, with features that are ready to use and adhere to native iOS and Android design standards. AngularJS was the inspiration behind the creation of Onsen UI, however, it may also be used with jQuery or any other framework.

The pre-built CSS components from Onsen UI make it simple to quickly construct flexible and attractive user interface layouts. For mobile developers, Onsen CSS Components is a web-based Topcoat theme roller that makes developing attractive UIs simpler. Alert Dialog is used to display some warning messages with pop-ups on the webpage.

Onsen UI Dialog CSS Component Alert Dialog Classes:

alert-dialog: This class is added to the enclosure of all the elements which will be considered as the dialog for giving alerts.
alert-dialog-container: This class is added to the enclosure of the container which will be considered as the container holding the dialog for giving alerts.
alert-dialog-title: This class is added to the title for the alert dialog.
alert-dialog-content: This class is added to the description of the alert.
alert-dialog-footer: This class is added to 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.
alert-dialog-mask: This class is used to add a mask over the whole page around that 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 class="alert-dialog-footer">
               <button class="alert-dialog-button">. .</button>
        </div>
      </div>
</div>

Example 1: The below code example demonstrates the implementation of an alert dialog.

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <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"> 
</head> 
  
<body> 
    <div style="margin:3rem;font-family:Roboto, sans-serif;"> 
        <h1 style="color:green;">GeeksforGeeks</h1> 
        <h3 style="margin-top:-1.5rem;"> 
            Onsen UI Alert Dialog CSS Components 
          </h3> 
    </div> 
    <div class="alert-dialog-mask"></div> 
    <div class="alert-dialog"> 
        <div class="alert-dialog-container"> 
            <div class="alert-dialog-title"> 
                Hi Geek 
            </div> 
            <div class="alert-dialog-content"> 
                This is an alert. 
            </div> 
            <div class="alert-dialog-footer"> 
                <button class="alert-dialog-button">OK 
                  </button> 
                <button class="alert-dialog-button">CANCEL 
                  </button> 
            </div> 
        </div> 
    </div> 
</body> 
</html>

Output:

Example 2: The below example demonstrates how you can add other CSS components to an alert dialog.

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <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"> 
</head> 
  
<body> 
    <div style="margin:3rem;font-family:Roboto,sans-serif;"> 
        <h1 style="color:green;"> 
            GeeksforGeeks 
          </h1> 
        <h3 style="margin-top:-1.5rem;"> 
            Onsen UI Dialog CSS Component Material Alert Dialog 
          </h3> 
    </div> 
    <div class="alert-dialog-mask"> 
      </div> 
    <div class="alert-dialog"> 
        <div class="alert-dialog-container"> 
            <div class="alert-dialog-title"> 
                Hi Geek 
            </div> 
            <div class="alert-dialog-content"> 
                You want to study from GFG? 
            </div> 
            <div class="alert-dialog-footer"> 
                <label class="switch switch--material" 
                       style="float:right;  
                              margin-right:2rem;  
                              margin-bottom:1rem;"> 
                    <input type="checkbox"
                           class="switch__input switch--material__input"> 
                    <div class="switch__toggle switch--material__toggle"> 
                        <div class="switch__handle switch--material__handle"> 
                        </div> 
                    </div> 
                </label> 
            </div> 
        </div> 
    </div> 
</body> 
</html>