121

Javascript Confirm popup, I want to show Yes, No button instead of OK and Cancel.

I have used this vbscript code:

<script language="javascript">
    function window.confirm(str) {
        execScript('n = msgbox("' + str + '","4132")', "vbscript");
        return (n == 6);
    }
</script>

this only works in IE, In FF and Chrome, it doesn't work.

Is there any workround to achieve this in Javascript?

I also want to change the title of popup like in IE 'Windows Internet Explorer' is shown, I want to show here my own application name.

Austin Thompson
  • 2,251
  • 1
  • 17
  • 23
Muhammad Akhtar
  • 51,913
  • 37
  • 138
  • 191
  • I made a yes no dialog myself its really easy to customize: https://github.com/stein189/YesNoDialog You could try this one if you want to – Szenis May 18 '15 at 09:06

10 Answers10

92

Unfortunately, there is no cross-browser support for opening a confirmation dialog that is not the default OK/Cancel pair. The solution you provided uses VBScript, which is only available in IE.

I would suggest using a Javascript library that can build a DOM-based dialog instead. Try Jquery UI: http://jqueryui.com/

johnvey
  • 5,101
  • 1
  • 19
  • 14
19

The only way you can accomplish this in a cross-browser way is to use a framework like jQuery UI and create a custom Dialog:

jquery Dialog

It doesn't work in exactly the same way as the built-in confirm popup but you should be able to make it do what you want.

Constantinius
  • 34,183
  • 8
  • 77
  • 85
  • 7
    For clarity, it's not the ONLY way - you can write your own in Javascript of course, not that it would be the right thing to do. – LeonardChallis Sep 21 '12 at 21:41
  • 1
    @LeonardChallis but including a large library just for a modal div functionality is better? I don't think so – nicholaswmin Dec 29 '14 at 11:18
8

You can also use https://github.com/pixel2/jQuery-Easy-Confirm-Dialog-plugin . It's very simple and easy to use. Just include jquery common library and one more file only:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js"></script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.1/themes/blitzer/jquery-ui.css" type="text/css" />
<script src="jquery.easy-confirm-dialog.js"></script>
Quan
  • 473
  • 7
  • 16
6

you can use sweetalert.

import into your HTML:

<script src="https://cdn.jsdelivr.net/npm/sweetalert2@8"></script>

and to fire the alert:

Swal.fire({
  title: 'Do you want to do this?',
  text: "You won't be able to revert this!",
  type: 'warning',
  showCancelButton: true,
  confirmButtonColor: '#3085d6',
  cancelButtonColor: '#d33',
  confirmButtonText: 'Yes, Do this!',
  cancelButtonText: 'No'
}).then((result) => {
  if (result.value) {
    Swal.fire(
      'Done!',
      'This has been done.',
      'success'
    )
  }
})

for more data visit sweetalert alert website

Ohad Cohen
  • 5,756
  • 3
  • 39
  • 36
5

Have a look at http://bootboxjs.com/

Very easy to use:

 bootbox.confirm("Are you sure?", function(result) {
  Example.show("Confirm result: "+result);
});
Andzej Maciusovic
  • 4,306
  • 1
  • 29
  • 40
5

You can't do this cross-browser with the confirm() function or similar. I highly suggest you use something like the jQuery UI dialog feature to create an HTML dialog box instead.

cletus
  • 616,129
  • 168
  • 910
  • 942
4

The featured (but small and simple) library you can use is JSDialog: js.plus/products/jsdialog

Here is a sample for creating a dialog with Yes and No buttons:

JSDialog.showConfirmDialog(
    "Save document before it will be closed?\nIf you press `No` all unsaved changes will be lost.",
    function(result) {
        // check result here
    },
    "warning",
    "yes|no|cancel"
);

JS Dialog demo screenshot

Dan Spirit
  • 327
  • 1
  • 8
1

Not tested on edge (I don't want to download it) but for Safari you must have the version 15.4 (unavailable on my Imac mid-2011)...

This answer is just an exercise that I would try to solve this question only with pure javascript.

Here is the styling exercise...

This create an HTML dialog box only. :(

    let myDatas;
    let openButton = document.getElementById("showDialog");
    let dialog = document.getElementById("favDialog");
    let form = document.getElementById("form1");
    let yes = document.getElementById("yesBtn");
    let no = document.getElementById("noBtn");
    let fill = document.getElementById("refill");
    let output = document.getElementById("output");
    fillDefaultDatas();
    refill.addEventListener("click",fillDefaultDatas);
    openButton.addEventListener("click",showDiag);
    yes.addEventListener("click",showMe);
    no.addEventListener("click",showMe);
    
    function showDiag(e){
        dialog.showModal();
    }
    function showMe(e){
        var vals = this.value;
        if(vals === "true"){
            deleteDatas();
        }else{
            keepDatas();
        }
        form.reset();
    }
    function displayTextContent(){
        output.textContent=("Object{" + myDatas.firstName + ", " + myDatas.lastName + ", " + myDatas.age + "}");
    }
    function fillDefaultDatas(){
        myDatas={firstName:"John", lastName:"Doe", age:"unknow birthtdate"};
        displayTextContent();
    }
    function deleteDatas(){
        myDatas={firstName:null, lastName:null, age:null};
        displayTextContent();
        return "delete";
    }
    function keepDatas(){
        displayTextContent();
        return "undelete";
    }
        .boldRed{
            font-weight: bold;
            color:#aa0000;
        }
<dialog id="favDialog">
  <form id="form1" method="dialog" action="#">
    <p class="boldRed">
      Are you sure to delete the datas?
    </p>
    <p>
      This choice is not cancelable.
    </p>
    <div>
      <button id="yesBtn" value="true">Yes</button>
      <button id="noBtn" value="false">No</button>
    </div>
  </form>
</dialog>
<p>
    <button id="showDialog">Delete all the datas?</button>
</p>
<div id="output"></div>
<p>
    <button id="refill">Reset the default datas?</button>
</p>
tatactic
  • 1,379
  • 1
  • 9
  • 18
0

1) You can download and upload below files on your site

<link href="/Style%20Library/css/smoothness/jquery.alerts.css" type="text/css" rel="stylesheet"/> 

2) after that you can directly use below code

$.alerts.okButton = "yes"; $.alerts.cancelButton = "no";

in document.ready function.

Please try it will work.

Thanks

0

Sweetalert2 provides different type of dialogs. You may also try for this. https://sweetalert2.github.io/

  • Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Nov 10 '21 at 11:15
  • While this link may answer the question, it is better to include the essential parts of the answer here and provide the link for reference. Link-only answers can become invalid if the linked page changes. - [From Review](/review/late-answers/30305307) – Mario Petrovic Nov 10 '21 at 15:14