Create JavaScript Alert Box With Three Buttons

The 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.

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="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.js"></script>
        <script type="text/javascript" src="https://code.jquery.com/jquery-1.7.1.js"></script>
    	<link rel="stylesheet" type="text/css" href="https://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:

Alert box with three buttons in JavaScript

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:

Confirmation Box with three buttons in JavaScript

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.

Guess The Number Game Using JavaScript

3D Photo/Image Gallery (on space) Using HTML5 CSS JS

Leave a Reply

Your email address will not be published. Required fields are marked *