Open In App

Onsen UI Dialog CSS Component Alert Dialog with Multiple Buttons 2

Improve
Improve
Like Article
Like
Save
Share
Report

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 alert dialog box with multiple buttons using the below classes.

Onsen UI Dialog CSS Component Alert Dialog with Multiple Buttons 2 Classes:

  • alert-dialog-button: This class is used to create the alert dialog button.
  • alert-dialog-button–rowfooter: This class is used to create the rowfooter alert dialog button.
  • alert-dialog-button–primal: This class is used to create the primal alert dialog button.

Syntax:

<div class="alert-dialog-mask"></div>
<div class="alert-dialog">
    <div class="alert-dialog-footer">
          <button class="alert-dialog-button">
              ...
          </button>
    </div>
</div>

Example 1: The following example demonstrates the Onsen UI Dialog CSS Component Alert Dialog with Multiple Buttons 2.

HTML




<!DOCTYPE html>
<html>
  
<head>
    <!-- CDN links of Onsen UI library -->
    <link rel="stylesheet" href=
    <link rel="stylesheet" href=
    <script src=
    </script>
</head>
  
<body>
    <center>
        <h1 style="color: green;">
            GeeksforGeeks
        </h1>
        <h3>
            Onsen UI Dialog CSS Component 
            Alert Dialog with Multiple Buttons 2
        </h3>
          
        <div class="alert-dialog-mask"></div>
        <div class="alert-dialog">
            <div class="alert-dialog-container">
                <div class="alert-dialog-title">
                    GeeksforGeeks
                </div>
          
                <div class="alert-dialog-footer 
                             alert-dialog-footer--rowfooter">
                    <button class="alert-dialog-button 
                            alert-dialog-button--rowfooter">
                        GFG1
                    </button>
                    <button class="alert-dialog-button 
                            alert-dialog-button--rowfooter">
                        GFG2
                    </button>
                </div>
            </div>
        </div>
    </center>
</body>
</html>


Output:

 

Example 2: The following example demonstrates the Onsen UI Dialog CSS Component Alert Dialog with Multiple Buttons 2.

HTML




<!DOCTYPE html>
<html>
  
<head>
    <!-- CDN links of Onsen UI library -->
    <link rel="stylesheet" href=
    <link rel="stylesheet" href=
    <script src=
    </script>
</head>
  
<body>
    <center>
        <h1 style="color: green;">
            GeeksforGeeks
        </h1>
        <h3>
            Onsen UI Dialog CSS Component 
            Alert Dialog with Multiple Buttons 2
        </h3>
          
        <div class="alert-dialog-mask"></div>
        <div class="alert-dialog">
            <div class="alert-dialog-container">
                <div class="alert-dialog-title">
                    GeeksforGeeks
                </div>
                <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 class="alert-dialog-footer 
                             alert-dialog-footer--rowfooter">
                    <button class="alert-dialog-button 
                            alert-dialog-button--rowfooter">
                        GFG1
                    </button>
                    <button class="alert-dialog-button 
                            alert-dialog-button--rowfooter
                            alert-dialog-button--primal">
                        GFG2
                    </button>
                    <button class="alert-dialog-button 
                            alert-dialog-button--rowfooter
                            alert-dialog-button--primal">
                        GFG3
                    </button>
                    <button class="alert-dialog-button 
                            alert-dialog-button--rowfooter">
                        GFG4
                    </button>
                </div>
            </div>
        </div>
    </center>
</body>
</html>


Output:

 

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



Last Updated : 02 Sep, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads