Add Yes and No buttons on jQuery confirmation box

Question

I want "Yes" and "No" buttons on a confirmation box without using jQuery UI Dialog.

Is there a way to do this?

Answer 1

The jQuery UI Dialog is a very flexible and powerful tool for that. Here's an example of how to ask the user if he wants to delete something:

<div id="dialog_box" style="display: none;">
    Really delete?
</div>
<button class="delete_btn">Delete</button>

<script>
$('.delete_btn').click(function(){
$('#dialog_box').dialog({
  title: 'Really delete this stuff?',
  width: 500,
  height: 200,
  modal: true,
  resizable: false,
  draggable: false,
  buttons: [{
  text: 'Yep, delete it!',
  click: function(){
      //delete it
    }
  },
  {
  text: 'Nope, my bad!',
  click: function() {
      $(this).dialog('close');
    }
  }]
});
});

</script>

//EDIT:

Sorry, it was not quite clear from your original question that you do not want to use the jQuery Dialog (but why tag the question with jquery/jquery-ui then?).

AFAIK, there is no other way to accomplish what you want to do. Also, keep in mind, that the text of the native JavaScript dialog box also takes care of the browser language and other local factors. So it might not always be a good idea to mess around with that.

Answer 2

Well, yes and no (no pun intended). You can use this:

if (confirm("Would you like an alert?")) {
    alert("Here you go!");
}

The confirm function will return true if the user pressed "OK", or false if "Cancel" was pressed. This is pure JavaScript (DOM level 0), so all browsers support this.

However, as far as I know, there is no way to customize the labels of the buttons. So you're stuck with the defaults ("Cancel" and "OK" on most browsers, if set to English).