Javascript confirm box with yes & no option

Let us see how we can create custom confirm box with yes and no options using bootstrap4 and javascript.

Demo The answer is .

Implementation

• We are going to use Bootstrap4 modal for creating popup dialog.
• We will use Javascript callback function to handle the response. Everything is written in ES6.
• As Bootstrap has Jquery dependency, We will use it for events.

Dependencies

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">

<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<!-- Popper JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>

<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>

//custom Confrim Dialog with Custom message and callback handler
function ConfirmDialog(message, handler){
  $(`<div class="modal fade" id="myModal" role="dialog"> 
     <div class="modal-dialog"> 
       <!-- Modal content--> 
        <div class="modal-content"> 
           <div class="modal-body" style="padding:10px;"> 
             <h4 class="text-center">${message}</h4> 
             <div class="text-center"> 
               <a class="btn btn-danger btn-yes">yes</a> 
               <a class="btn btn-default btn-no">no</a> 
             </div> 
           </div> 
       </div> 
    </div> 
  </div>`).appendTo('body');
 
  //Trigger the modal
  $("#myModal").modal({
     backdrop: 'static',
     keyboard: false
  });
  
  //Remove the modal once it is closed.
  $("#myModal").on('hidden.bs.modal', function () {
      $("#myModal").remove();
  });
}

Explanation

• Here we have created a function which accepts a message and a callback handler.
• In this we are appending the modal at the end of the body tag with jquery’s appendto method.
• After appending the modal we are triggering or showing the modal with Bootstrap’s modal method. We are also passing two parameters {backdrop: 'static', keyboard: false} which prevents modal from hiding with keyboard events or clicking at the backdrop area.
• We are checking if modal is hidden with bootstrap’s hidden.bs.modal and then we are removing the modal with jquery’s remove method. This will prevent from adding modal everytime.

Handling the yes & no response of confirm box.

 //
 //Pass true to callback function
 $(".btn-yes").click(function () {
     handler(true);
     $("#myModal").modal("hide");
 });
    
 //Pass false to the callback function
 $(".btn-no").click(function () {
     handler(false);
     $("#myModal").modal("hide");
 });
 //

Explanation

If yes or no button is pressed inside the confirm box then pass true or false to javascript callback function and hide the modal.

function confirmDialog(message, handler){
  $(`<div class="modal fade" id="myModal" role="dialog"> 
     <div class="modal-dialog"> 
       <!-- Modal content--> 
        <div class="modal-content"> 
           <div class="modal-body" style="padding:10px;"> 
             <h4 class="text-center">${message}</h4> 
             <div class="text-center"> 
               <a class="btn btn-danger btn-yes">yes</a> 
               <a class="btn btn-default btn-no">no</a> 
             </div> 
           </div> 
       </div> 
    </div> 
  </div>`).appendTo('body');
 
  //Trigger the modal
  $("#myModal").modal({
     backdrop: 'static',
     keyboard: false
  });
  
   //Pass true to a callback function
   $(".btn-yes").click(function () {
       handler(true);
       $("#myModal").modal("hide");
   });
    
   //Pass false to callback function
   $(".btn-no").click(function () {
       handler(false);
       $("#myModal").modal("hide");
   });

   //Remove the modal once it is closed.
   $("#myModal").on('hidden.bs.modal', function () {
      $("#myModal").remove();
   });
}

confirmDialog("Is this working?", (ans) => {
  if (ans) {
     console.log("yes");
  }else {
     console.log("no");
  }
 });

Learn more about => function here.
Demo The answer is .