Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
How to create JavaScript alert with 3 buttons (Yes, No and Cancel)?
The standard JavaScript alert box won't work if you want to customize it. For that, we have a custom alert box, which we're creating using jQuery and styled with CSS.
Understanding the Problem
JavaScript's built-in alert() and confirm() functions are limited - they only provide basic "OK" or "OK/Cancel" options. To create a custom dialog with Yes, No, and Cancel buttons, we need to build our own solution using HTML, CSS, and JavaScript.
Complete Example
Here's a complete implementation of a custom alert with three buttons:
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
function functionConfirm(msg, myYes, myNo, cancel) {
var confirmBox = $("#confirm");
confirmBox.find(".message").text(msg);
// Clear previous event handlers and add hide functionality
confirmBox.find(".yes,.no,.cancel").unbind().click(function() {
confirmBox.hide();
});
// Bind specific actions to each button
confirmBox.find(".yes").click(myYes);
confirmBox.find(".no").click(myNo);
confirmBox.find(".cancel").click(cancel);
confirmBox.show();
}
</script>
<style>
#confirm {
display: none;
background-color: #91FF00;
border: 1px solid #aaa;
position: fixed;
width: 300px;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
padding: 20px;
box-sizing: border-box;
text-align: center;
border-radius: 8px;
box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}
#confirm button {
background-color: #48E5DA;
display: inline-block;
border-radius: 5px;
border: 1px solid #aaa;
padding: 8px 15px;
margin: 5px;
text-align: center;
cursor: pointer;
font-size: 14px;
}
#confirm button:hover {
background-color: #36B5AA;
}
#confirm .message {
text-align: center;
margin-bottom: 15px;
font-size: 16px;
}
</style>
</head>
<body>
<div id="confirm">
<div class="message"></div>
<button class="yes">Yes</button>
<button class="no">No</button>
<button class="cancel">Cancel</button>
</div>
<button onclick='functionConfirm("Do you like Football?",
function yes() { alert("You clicked Yes!"); },
function no() { alert("You clicked No!"); },
function cancel() { alert("You clicked Cancel!"); }
);'>Show Custom Alert</button>
</body>
</html>
How It Works
The solution consists of three main parts:
- HTML Structure: A hidden div containing the message area and three buttons
- CSS Styling: Positions the dialog in the center of the screen with attractive styling
- JavaScript Function: Shows the dialog, sets the message, and binds click handlers to each button
Key Features
| Feature | Description |
|---|---|
| Custom Message | Dynamic text content passed as parameter |
| Three Callbacks | Separate functions for Yes, No, and Cancel actions |
| Centered Position | Fixed positioning in the center of viewport |
| Event Handling | jQuery unbind/bind pattern for clean event management |
Usage Pattern
To use this custom alert, call the function with four parameters:
functionConfirm(
"Your question here?",
function() { /* Yes action */ },
function() { /* No action */ },
function() { /* Cancel action */ }
);
Conclusion
This custom alert solution provides complete control over the dialog appearance and behavior. You can easily modify the styling, add more buttons, or enhance the functionality to suit your specific needs.
4K+ Views
