如何自定义Javascript的confirm()框

Question

stackoverflow如何自定义confirm()框的按钮并向按钮添加自定义文本？

我看到的所有其他问题都指向一个随机jQuery插件来执行此操作.这可以用Vanilla Javascript完成吗？如果是,那怎么样？

Answer 1

您可以为用户提供特定的消息/按钮,而无需使用自定义警报框/插件.他们是:

1. 要OK通过调用以下方式仅显示按钮来显示消息:

   window.alert('Message');
   

2. 要显示带OK/ Cancel作为选项的消息,请通过调用:

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

3. 正如StackOverflow在您的示例中所做的那样,要在离开页面时显示Leave.../ Stay...消息,按下Stay会导致浏览器停留在页面上(确切的按钮措辞取决于浏览器,您无法控制它):

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

对于任何其他情况,您需要使用某种警报插件(或自己写一个: - /),正如您在问题中推测的那样.

简而言之,这些按钮是特定于浏览器的,并且chrome会自动在按钮上显示有用的文本,以使事情更加清晰.这种事有window.onbeforeunload,如果你返回一个字符串,其显示为导航之前的消息.