如何自定义Javascript的Confirm（）框

Question

How does stackoverflow customize the confirm() box's buttons and add custom text to the buttons?

All the other questions I looked at pointed at a random jQuery plugin to do this. Can this be done with Vanilla Javascript? If yes, then how?

Answer 1

There are only specific messages/buttons you can offer the user, without using a custom alert box/plugin. They are:

1. To display a message with just an OK button, by calling:

    window.alert('Message'); 

2. To display a message with OK / Cancel as the options, by calling:

    var didTheyPressOK = window.confirm('Are you sure you want to XXXXX?'); 

3. As StackOverflow does in your example , to display a Leave... / Stay... message on leaving the page, where pressing Stay causes the browser to stay on your page (the exact button wording is browser-dependent, you cannot control it):

    window.onbeforeunload = function() { // you may or may not want a condition here, eg // if (thereAreUnsavedChanges) return 'Are you sure you actually want to leave? You have unsaved changes...'; } 

For any other situation, you'll need to use some kind of alert plugin (or write one yourself :-/), as you speculated in your question.

---

Put simply, those buttons are browser specific and chrome automatically displays helpful text on the button to make things clearer. It happens with window.onbeforeunload if you return a string, which is displayed as a message before navigation.