122

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.

1

10 Answers 10

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/

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.

2
  • 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. Sep 21, 2012 at 21:41
  • 1
    @LeonardChallis but including a large library just for a modal div functionality is better? I don't think so Dec 29, 2014 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>
3
  • The provided link is dead. :-(
    – serverjohn
    Jul 19, 2023 at 20:17
  • 1
    I updated the link. You can download the jquery.easy-confirm-dialog.js file on GitHub . The last commit was 10 years ago though.
    – Quan
    Jul 19, 2023 at 21:57
  • Oh wow! I didn't even notice the age of this one. :-) And thank you.
    – serverjohn
    Jul 20, 2023 at 12:41
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

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.

0
5

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

Very easy to use:

 bootbox.confirm("Are you sure?", function(result) {
  Example.show("Confirm result: "+result);
});
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

3
  • 1
    Hey, where do you donwload this?
    – Gary
    Dec 4, 2017 at 1:26
  • @Gary Links have defaulted to blue, underlined text for decades. Use your mouse to hover over the blue text in the first line of this answer and click the left button. Dec 10, 2019 at 18:16
  • 1
    premium plugins do not a programmer help
    – Chris Pink
    Feb 16, 2020 at 10:37
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>

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/

2
  • 1
    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.
    – Community Bot
    Nov 10, 2021 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 Nov 10, 2021 at 15:14

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.