Skip to content

Confirm box in JavaScript with yes no option

  • by

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.


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>

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

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


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>
      <script src=""></script>
         function functionConfirm(msg, myYes, myNo) {
            var confirmBox = $("#confirm");
            confirmBox.find(".yes,.no").unbind().click(function() {
         #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;
      <div id="confirm">
         <div class="message"></div>
         <button class="yes">Yes</button>
         <button class="no">No</button>
      <button onclick = 'functionConfirm("Do you like Football?", function yes() {
      function no() {

Confirm Yes or No With a Hidden Div

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

  <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>
    <p>Do you really want to reset the database?</p>
    <button class="warning" onclick="confirmYes()">Yes</button>
    <button onclick="confirmNo()">No</button>  

  //show the confirmation div
  function resetDatabase() {
  //redirect to the delete profile script
  function confirmYes() {
        location.href = '/resetDatabase.php';
  //hide the confirmation div
  function confirmNo() {

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

Leave a Reply

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.