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
Selected Reading
How to create a dialog with "yes" and "no" options in JavaScript?
JavaScript's built-in confirm() dialog only provides "OK" and "Cancel" buttons. To create a custom dialog with "Yes" and "No" options, you need to build a custom modal using HTML, CSS, and JavaScript.
Built-in confirm() Limitation
The standard confirm() function cannot be customized to show "Yes/No" buttons:
<html>
<body>
<script>
// Built-in confirm() only shows OK/Cancel
let result = confirm("Do you want to continue?");
console.log(result ? "User clicked OK" : "User clicked Cancel");
</script>
</body>
</html>
Custom Yes/No Dialog Solution
Here's a complete custom dialog implementation using jQuery:
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<style>
#confirm {
display: none;
background-color: #f9f9f9;
border: 2px solid #333;
border-radius: 8px;
position: fixed;
width: 300px;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
padding: 20px;
box-shadow: 0 4px 8px rgba(0,0,0,0.3);
text-align: center;
z-index: 1000;
}
#confirm button {
background-color: #007bff;
color: white;
border: none;
border-radius: 5px;
padding: 10px 20px;
margin: 10px 5px;
cursor: pointer;
font-size: 14px;
}
#confirm button.no {
background-color: #dc3545;
}
#confirm button:hover {
opacity: 0.9;
}
#confirm .message {
margin-bottom: 15px;
font-size: 16px;
}
.overlay {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0,0,0,0.5);
z-index: 999;
}
</style>
</head>
<body>
<button class="yes">Yes</button>
<button class="no">No</button>
<button onclick="showConfirmDialog()">Show Yes/No Dialog</button>
<script>
function functionConfirm(msg, yesCallback, noCallback) {
var confirmBox = $("#confirm");
var overlay = $("#overlay");
confirmBox.find(".message").text(msg);
// Remove previous event handlers
confirmBox.find(".yes, .no").unbind();
// Add new event handlers
confirmBox.find(".yes").click(function() {
confirmBox.hide();
overlay.hide();
if (yesCallback) yesCallback();
});
confirmBox.find(".no").click(function() {
confirmBox.hide();
overlay.hide();
if (noCallback) noCallback();
});
overlay.show();
confirmBox.show();
}
function showConfirmDialog() {
functionConfirm(
"Do you like JavaScript?",
function() { alert("Great! JavaScript is awesome!"); },
function() { alert("That's okay, maybe you'll like it later!"); }
);
}
</script>
</body>
</html>
How It Works
The custom dialog system works through these components:
- HTML Structure: A hidden div containing the message and Yes/No buttons
- CSS Styling: Centers the dialog and adds visual styling with overlay
- JavaScript Logic: Shows/hides the dialog and handles button clicks
- Callback Functions: Execute different actions based on user choice
Key Features
- Modal overlay prevents interaction with background content
- Customizable message text
- Separate callback functions for Yes and No responses
- Responsive positioning that centers on screen
- Clean, modern styling with hover effects
Conclusion
Since JavaScript's built-in confirm() only provides OK/Cancel buttons, creating a custom modal dialog is the best approach for Yes/No confirmations. This method gives you complete control over styling and functionality.
Updated on: 2026-03-15T22:15:13+05:30
3K+ Views
Advertisements