Onsen UI Dialog CSS Component Alert Dialog with Multiple Buttons

Last Updated : 01 Sep, 2022

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

Onsen UI Dialog CSS Component Alert Dialog with Multiple Buttons Class:

alert-dialog-button: This class is used to create the 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>
</div>

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

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <!-- CDN links of Onsen UI library -->
    <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"> 
    <script src= 
"https://unpkg.com/onsenui/js/onsenui.min.js"> 
    </script> 
</head> 
  
<body> 
    <center> 
        <h1 style="color: green;"> 
            GeeksforGeeks 
        </h1> 
        <h3> 
            Onsen UI Dialog CSS Component  
            Alert Dialog with Multiple Buttons 
        </h3> 
          
        <div class="alert-dialog-mask"></div> 
        <div class="alert-dialog"> 
            <div class="alert-dialog-container"> 
                <div class="alert-dialog-footer"> 
                    <button class="alert-dialog-button"> 
                        Submit 
                    </button> 
                    <button class="alert-dialog-button"> 
                        Cancel 
                    </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.

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <!-- CDN links of Onsen UI library -->
    <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"> 
    <script src= 
"https://unpkg.com/onsenui/js/onsenui.min.js"> 
    </script> 
</head> 
  
<body> 
    <center> 
        <h1 style="color: green;"> 
            GeeksforGeeks 
        </h1> 
        <h3> 
            Onsen UI Dialog CSS Component  
            Alert Dialog with Multiple Buttons 
        </h3> 
          
        <div class="alert-dialog-mask"></div> 
        <div class="alert-dialog"> 
            <div class="alert-dialog-container"> 
                <div class="alert-dialog-content"> 
                    GeeksforGeeks alert dialog 
                </div> 
                <div class="alert-dialog-footer"> 
                    <button class="alert-dialog-button"> 
                        Submit 
                    </button> 
                    <button class="alert-dialog-button  
                            alert-dialog-button--primal"> 
                        GFG1 
                    </button> 
                    <button class="alert-dialog-button  
                            alert-dialog-button--primal"> 
                        GFG2 
                    </button> 
                </div> 
            </div> 
        </div> 
    </center> 
</body> 
</html> 