Display Yes and No buttons instead of OK and Cancel in Confirm box?

Question

Possible Duplicate:
how to create yes/no/cancel box in javascript instead of ok/cancel?

In a Confirm message box, how can I change the buttons to say "Yes" and "No" instead of "OK" and "Cancel"? Is there some way to accomplish this using jQuery/Javascript? Thanks in advance for any help.

@Felix: It is not an exact duplicate, as the answers to the previous question did not mention how to do this with JQuery, only that it is possible. The answers here could be merged in that question, though. — Paŭlo Ebermann, Jun 22 '11 at 22:55
@PaloEbermann: Well, there is a link to jQuery dialog. I think we can expect from developers that they read documentation (if they know where to find it). It's still a duplicate, the question is about exactly the same issue. — Felix Kling, Jun 22 '11 at 23:19

gilly3 · Answer 1 · 2013-03-07T20:08:42.253

14

Create your own confirm box:

<div id="confirmBox">
    <div class="message"></div>
    <span class="yes">Yes</span>
    <span class="no">No</span>
</div>

Create your own confirm() method:

function doConfirm(msg, yesFn, noFn)
{
    var confirmBox = $("#confirmBox");
    confirmBox.find(".message").text(msg);
    confirmBox.find(".yes,.no").unbind().click(function()
    {
        confirmBox.hide();
    });
    confirmBox.find(".yes").click(yesFn);
    confirmBox.find(".no").click(noFn);
    confirmBox.show();
}

Call it by your code:

doConfirm("Are you sure?", function yes()
{
    form.submit();
}, function no()
{
    // do nothing
});

You'll need to add CSS to style and position your confirm box appropriately.

Working demo: jsfiddle.net/Xtreu

edited Mar 07 '13 at 20:08

answered Jun 22 '11 at 20:29

gilly3

87,962
25
144
176

this not work any way please change code or give more description about this. – Jubin Patel Mar 07 '13 at 13:06
@jubinPatel - Here is a working demo: http://jsfiddle.net/Xtreu/ – gilly3 Mar 07 '13 at 20:00
2

this confirm box doesnt disable the rest of the screen as normal confirm box does. even when the confirm box appears , I am able to press the button "Delete My Data" again – ALBI Nov 05 '13 at 05:12
2

@ALBI - This update to my jsfiddle adds an overlay to hide the page: http://jsfiddle.net/Xtreu/269/ I added the overlay with JavaScript, but you could also add it to the HTML and show/hide it with JavaScript like this: http://jsfiddle.net/Xtreu/270/. – gilly3 Nov 05 '13 at 18:22

score 13 · Answer 2 · edited Jun 22 '11 at 22:53

13

If you switch to the jQuery UI Dialog box, you can initialize the buttons array with the appropriate names like:

$("#id").dialog({
  buttons: {
    "Yes": function() {},
    "No": function() {}
  }
});

edited Jun 22 '11 at 22:53

Paŭlo Ebermann

73,284
20
146
210

answered Jun 22 '11 at 20:17

Richard B

1,581
1
15
31

score 2 · Answer 3 · edited Nov 08 '18 at 00:24

2

No, it is not possible to change the content of the buttons in the dialog displayed by the confirm function. You can use Javascript to create a dialog that looks similar.

edited Nov 08 '18 at 00:24

leocrimson

702
1
11
25

answered Jun 22 '11 at 20:16

Donut

110,061
20
134
146

score 2 · Answer 4 · edited May 27 '13 at 12:48

2

There is the Jquery alert plugin

$.alerts.okButton = ' Yes ';
$.alerts.cancelButton = ' No ';

edited May 27 '13 at 12:48

Rahul

5,603
6
34
57

answered Jun 22 '11 at 20:20

Mike Vormwald

2,280
22
29

score 2 · Answer 5 · edited May 27 '13 at 12:53

2

As far as I know, it's not possible to change the content of the buttons, at least not easily. It's fairly easy to have your own custom alert box using JQuery UI though

edited May 27 '13 at 12:53

Rahul

5,603
6
34
57

answered Jun 22 '11 at 20:25

riku

763
4
7

JAAulde · Answer 6 · 2011-06-22T20:33:51.597

2

An example using jQuery UI dialog: http://jsfiddle.net/JAAulde/qqkGA/ as well as UI's own demo: http://jqueryui.com/demos/dialog/#modal-confirmation

edited Jun 22 '11 at 20:33

answered Jun 22 '11 at 20:28

JAAulde

19,250
5
52
63

Display Yes and No buttons instead of OK and Cancel in Confirm box?

6 Answers6

Linked