Open In App

Onsen UI Dialog CSS Component Material Alert Dialog

Last Updated : 22 Jun, 2022
Improve
Improve
Like Article
Like
Save
Share
Report

Onsen UI is an HTML5 framework that allows you to design distinctive and usable user interfaces for free (UI). It also makes UI creation easier, enabling programmers to focus on the core of the product. Onsen UI is a complex set of user interface components designed specifically for mobile apps, with ready-to-use features that follow native iOS and Android design standards. Onsen UI was created with AngularJS in mind, but it can also be used with jQuery or any other framework. Onsen UI is a PhoneGap and Cordova JavaScript Framework.

Onsen UI provides the pre-built CSS components for fast designing versatile and appealing user interface layouts. Onsen CSS Components is a web-based Topcoat theme roller for mobile developers that makes creating beautiful UIs easier.

Alert Dialog is used to display some warning messages with pop-ups on the webpage. Material Alert Dialog utilizes the various CSS components to create an attractive user interface which helps to enhance the overall user experience.

Onsen UI Dialog CSS Component Material Alert Dialog Classes:

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

Syntax:

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

Example 1: The below code example demonstrates an alert dialog as a CSS component.

HTML




<!DOCTYPE html>
<html>
  
<head>
    <link rel="stylesheet" href=
    <link rel="stylesheet" href=
</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 alert-dialog-mask--material"></div>
    <div class="alert-dialog
                alert-dialog--material">
        <div class="alert-dialog-container 
                    alert-dialog-container--material">
            <div class="alert-dialog-title 
                        alert-dialog-title--material">
                Hi Geek
            </div>
            <div class="alert-dialog-content 
                        alert-dialog-content--material">
                This is a alert.
            </div>
            <div class="alert-dialog-footer 
                        alert-dialog-footer--material">
                <button class="alert-dialog-button 
                               alert-dialog-button--material">OK
                  </button>
                <button class="alert-dialog-button 
                               alert-dialog-button--material">CANCEL
                  </button>
            </div>
        </div>
    </div>
</body>
</html>


Output:

 

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

HTML




<!DOCTYPE html>
<html>
  
<head>
    <link rel="stylesheet" href=
    <link rel="stylesheet" href=
</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 
                alert-dialog-mask--material">
      </div>
    <div class="alert-dialog 
                alert-dialog--material">
        <div class="alert-dialog-container 
                    alert-dialog-container--material">
            <div class="alert-dialog-title 
                        alert-dialog-title--material">
                Hi Geek
            </div>
            <div class="alert-dialog-content 
                        alert-dialog-content--material">
                You want to study from GFG?
            </div>
            <div class="alert-dialog-footer 
                        alert-dialog-footer--material">
                <label class="switch switch--material" 
                       style="float: right; 
                              margin-right: 2rem">
                    <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>


Output:

 

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



Similar Reads

Onsen UI Dialog CSS Component Alert Dialog with Multiple Buttons 2
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 with Multiple Buttons 2 is used to create the
2 min read
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 dialo
2 min read
Onsen UI Dialog CSS Component Alert Dialog without Title
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 dia
2 min read
Onsen UI Dialog CSS Component Alert Dialog with Multiple Buttons
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 with Multiple Buttons is used to create the a
2 min read
Onsen UI CSS Component Material 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. A Dialog is a type of modal window which appears in front of app content to provide critical information or ask for a decision. Onsen UI CSS Component Material Dialog is u
2 min read
Onsen UI Alert Dialog CSS Components
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
3 min read
Onsen UI CSS Component Material Tabbar (Icon and Label)
Onsen UI CSS is used to create beautiful HTML components. It is one of the most efficient ways to create HTML5 hybrid components compatible with mobile and desktop. Onsen UI CSS Components are pre-built CSS components that may be used to create adaptive and attractive user interface layouts rapidly. Onsen UI CSS Component Material Tabbar (Icon and
3 min read
Onsen UI CSS Component Material List with Thumbnails
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. Lists are used to store data or information on web pages in ordered or unordered form. Thumbnails are reduced-size images that can be used with the list item. Onsen UI CSS
2 min read
Onsen UI CSS Component Material List with Icons
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. Lists are used to store data or information on web pages in ordered or unordered form. Onsen UI CSS Component Material List with Icons is used to add the icon along with t
2 min read
Onsen UI CSS Component Material Card
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. In this tutorial, we are going to implement the Onsen UI CSS Component Material Card component. A card is an HTML component used to show data that are alike. Cards help to
3 min read