Create JavaScript Alert Box With Three Buttons
By Saruque Ahamed MollickThe JavaScript alert box has only one button which is the ok button. Alert box With two buttons ok and cancel is known as Confirmation Dialog Box. In this tutorial, We will learn how to create an alert box with three buttons in JavaScript, i.e Create JavaScript alert box with three buttons –yes no and cancel
You can change the button text too.
This tutorial is an older one and this method does not work in newer browsers.
Also read,
How to add line breaks in JavaScript alert
Alert Before Leaving A Web Page Using JavaScript – jQuery
Confirmation Box with three buttons in JavaScript
You can create the confirmation box with three buttons in two methods:
Method 1:
We will use jQuery to create alert box with three buttons. But we will not use any custom CSS. We will use jQuery UI CSS
Method 2:
We will use jQuery but we will do this with our custom CSS
Create JavaScript Alert Box with three buttons with jQuery UI CSS
<html>
<head>
<title>Your title goes here</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.js"></script>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.js"></script>
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.17/themes/base/jquery-ui.css">
</head>
<body>
<button class="click_me">Click here</button>
<script type="text/javascript">
$(function() {
$('.click_me').click(function(e) {
e.preventDefault();
var message_alert = $('<p>Are you confirmed?</p>').dialog({
buttons: {
"Yes": function() {alert('you clicked on yes');},
"No": function() {alert('you clicked on no');},
"Cancel": function() {
alert('you clicked on cancel');
message_alert.dialog('close');
}
}
});
});
});
</script>
</body>
<html>Output:
If the user clicks on the button, a confirmation box will appear like this:
You can also read,
How To Close Popup Window Automatically After Few Seconds in JavaScript
How to find the Keycode in JavaScript ( Core JavaScript no jQuery )
JavaScript Alert Box with three buttons with Custom CSS
<!DOCTYPE html>
<html>
<head>
<title>Your title goes here</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
function functionConfirm(text, this_is_yes, this_is_no, cancel_it) {
var confirmation_box = $("#confirm");
confirmation_box.find(".message").text(text);
confirmation_box.find(".yes,.no,.cancel_it").unbind().click(function() {
confirmation_box.hide();
});
confirmation_box.find(".yes").click(this_is_yes);
confirmation_box.find(".no").click(this_is_no);
confirmation_box.find(".no").click(cancel_it);
confirmation_box.show();
}
</script>
<style>
#confirm {
display: none;
background-color: pink;
border: 1px solid #aaa;
position: fixed;
width: 250px;
left: 50%;
margin-left: -100px;
padding: 6px 8px 8px;
box-sizing: border-box;
text-align: center;
}
#confirm button {
background-color: lavender;
display: inline-block;
border-radius: 5px;
border: 1px solid #aaa;
padding: 5px;
text-align: center;
width: 80px;
cursor: pointer;
}
#confirm .message {
text-align: left;
}
</style>
</head>
<body>
<div id="confirm">
<div class="message"></div>
<button class="yes">Yes!</button>
<button class="no">No!</button>
<button class="cancel_it">cancel!</button>
</div>
<button onclick='functionConfirm("Do you love ", function yes() {
alert("You Clicked Yes")
}, function no() {
alert("You Clicked No")
}
);'>Click Me</button>
</body>
</html>Output:
I hope this was useful to you. If you have any question or doubt regarding this tutorial feel free to comment in the below comment section.
.masterGlobalLayer {
padding: 4px 20px 10px 20px;
background-image: url(tile.png);
background-repeat: repeat;
background-position: top left;
bottom: 0;
}.masterGlobalLayer {
padding: 4px 20px 10px 20px;
background-image: url(tile.png);
background-repeat: repeat;
background-position: top left;
bottom: 0;
}