Confirm box in JavaScript with yes no option

You can create a JavaScript confirmation box that offers “yes” and “no” options by using the confirm() method. You can specify custom message as its argument.

window.confirm(message);

Confirm box in JavaScript with yes no option

Simple example code dialog box, there are two buttons: OK and Cancel. If a user clicks on the OK button, the confirm method returns true, and if a user clicks on the cancel button, the confirm method returns false.

<!DOCTYPE html>
<html>
<body>
  <script>

    function confirmAction() {
      let confirmAction = confirm("Are you sure to execute this?");
      if (confirmAction) {
        alert("Action successfully executed");
      } else {
        alert("Action canceled");
      }
    }
  </script>

  <button onclick="confirmAction()">Delete</button>
</body>
</html>

Output:

Confirm box in JavaScript with yes no option

Make javascript alert Yes/No Instead of Ok/Cancel

To create a dialog with “yes” or “nor”, use a custom dialog box. You can’t create a dialog box with “yes” or “no”.

<!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) {
            var confirmBox = $("#confirm");
            confirmBox.find(".message").text(msg);
            confirmBox.find(".yes,.no").unbind().click(function() {
               confirmBox.hide();
            });
            confirmBox.find(".yes").click(myYes);
            confirmBox.find(".no").click(myNo);
            confirmBox.show();
         }
      </script>
      <style>
         #confirm {
            display: none;
            background-color: #ffffff;
            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: #48E5DA;
            display: inline-block;
            border-radius: 5px;
            border: 1px solid #aaa;
            padding: 5px;
            text-align: center;
            width: 80px;
            cursor: pointer;
            margin: 10px;
         }
         #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>
      </div>
      <button onclick = 'functionConfirm("Do you like Football?", function yes() {
         alert("Yes")
      },
      function no() {
         alert("no")
      });'>submit</button>
   </body>
</html>

Confirm Yes or No With a Hidden Div

Another way to confirm yes or no is with a hidden div on your page.

<main>
  <h1>Delete Profile</h1>    
  <p>Click on the following button to delete your profile from our website permanently, this action can not be undone </p>
  <button onclick="resetDatabase()">Reset the Database!</button>
  <div id="confirm" hidden>
    <h3>Confirmation</h3>
    <p>Do you really want to reset the database?</p>
    <button class="warning" onclick="confirmYes()">Yes</button>
    <button onclick="confirmNo()">No</button>  
  </div>
</main>

<script>
  //show the confirmation div
  function resetDatabase() {
    document.getElementById("confirm").hidden=false
  }
  
  //redirect to the delete profile script
  function confirmYes() {
        location.href = '/resetDatabase.php';
  }
  
  //hide the confirmation div
  function confirmNo() {
    document.getElementById("confirm").hidden=true
  }
</script>

Do comment if you have any doubts or suggestions on this JS confirm box topic.

Note: The All JS Examples codes are tested on the Firefox browser and the Chrome browser.
OS: Windows 10
Code: HTML 5 Version

Rohit

Degree in Computer Science and Engineer: App Developer and has multiple Programming languages experience. Enthusiasm for technology & like learning technical.

Confirm box in JavaScript with yes no option