Javascript Confirm Popup: Yes, No Buttons Instead of OK, Cancel

Custom Modal Techniques

Unleashing jQuery UI powers

Looking for an all/browser-charmer? jQuery UI Dialog is a comprehensive toolset allowing you to craft custom confirm dialogs. It ensures a uniform user experience across diverse browser territories:

$("#confirmModal").dialog({
  resizable: false,
  height: "auto",
  width: 400,
  modal: true,
  buttons: {
    "Yes": function() { 
      $(this).dialog("close"); 
      // Here, we say "Yes" to life!
    },
    "No": function() {
      $(this).dialog("close"); 
      // Just when life tries to say "Yes", we say "No"!
    }
  }
});


Sweetening the deal with Sweetalert

If stylized aesthetics have captured your fancy, lean on Sweetalert! It adorns your custom confirm modals with enticing Yes and No buttons:

swal({
  title: "Are you sure?",
  icon: "warning",
  buttons: {
    yes: {
      text: "Yes",
      value: true,
      className: "sweet-yes"
    },
    no: {
      text: "No",
      value: false,
      className: "sweet-no"
    }
  },
}).then((value) => {
  if (value) {
    // Yes action: Sweet victory!
  } else {
    // No action: Ain't that a sweet defeat!
  }
});


Dipping toes in DOM-based dialogs

For wizards preferring independence and full customizability, crafting a DOM-based dialog is pitch perfect:

// Basic structure with event delegation
document.body.addEventListener('click', function(event) {
  if(event.target.id === 'yesBtn') { /* Welcome to Yesland! */ }
  if(event.target.id === 'noBtn') { /* Appreciate your dedication to the No-Cause! */ }
});


Upholding Accessibility Standards

Remember to include everyone in your magic. Keyboard navigation and focus management, complemented by ARIA attributes like role="dialog" and aria-labelledby, can make your modal interaction friendly to screen readers.

Splashing Brand Colors

Why leave your custom modal bland when it can be a canvas for your brand presence? Dabble with title and button customizations, colors, even add your magical avatar to vividly connote your branding. It aids in rendering modal interactions more intuitive for your spell-bound users.

Promises: Handling User Response

Modern sorcery like promises and async/await pattern can smoothen out your asynchronous flow management in user response handling. It significantly refines your code's readability, making it a well-bound grimoire of efficient confirmation logic.

Cross-Browser Consistency

It's crucial that your custom magical displays charm uniformly across all browsers and devices. While libraries like jQuery UI have a built-in charm for handling this, a vanilla potion might need additional ingredients to normalize style and functionality.