How to personalize alert buttons - window.confirm() and window.alert() [duplicate]

问题

I have seen many websites that have personalized their alert and confirmation boxes with different button text.

By default, this is what the JavaScript window.confirm() function would output:

+-----------------------------+
|Message from webpage         |
+-----------------------------+
|Popup text                   |
|                             |
|                             |
|                             |
|                             |
|   [Ok]     [Cancel]         |
+-----------------------------+

But, what if I wanted some customization like custom header text, and custom button text?

+-----------------------------+
|My custom Header             |
+-----------------------------+
|Popup text                   |
|                             |
|                             |
|                             |
|                             |
|   [HELLO]     [GOODBYE]     |
+-----------------------------+

Can this be achieved in JavaScript, Jquery, or AJAX (or another language)? If so, could you please show me an example? Thanks!

回答1:

I wont discover anything new here. And the comments created say all the most relevant information.

You should look at open source alternatives that have great support and are easy to customize. Take a look at BootBoxJS (it depends on jQuery).

In that site you can find examples of alerts, dialogs, and other useful tools. e.g.

To use the mentioned soft:

Download the js library compressed (including js, css, etc)
Unzip the file whatever you want to.
Then copy and paste the example code and save this as example.html or whatever you want to.
Now change the links to make it point to your downloaded files (see how I changed my file)
Save the file and test it with your preferred browser.

I just did it and it works perfect! (Under Firefox and Chromium)

NOTE: I tested it with the new version of BootStrap (v.3) and it doesn't work.

回答2:

The simple answer is that you can't , prompts do not support this feature,

However you could use Jquery or build your own modal/ dialog to emulate this functionality.

See the jQuery UI Dialog for ideas and examples.

Setting up the example from the page check out the jsfiddle

HTML:

<div id="dialog-confirm" title="Empty the recycle bin?">
  <p><span class="ui-icon ui-icon-alert" style="float: left; margin: 0 7px 20px 0;"></span>These items will be permanently deleted and cannot be recovered. Are you sure?</p>
</div>

<p>Sed vel diam id libero <a href="http://example.com">rutrum convallis</a>. Donec aliquet leo vel magna. Phasellus rhoncus faucibus ante. Etiam bibendum, enim faucibus aliquet rhoncus, arcu felis ultricies neque, sit amet auctor elit eros a lectus.</p>

$(function() {
    $( "#dialog-confirm" ).dialog({
      resizable: false,
      height:140,
      modal: true,
      buttons: {
        "Delete all items": function() {
          $( this ).dialog( "close" );
        },
        Cancel: function() {
          $( this ).dialog( "close" );
        }
      }
    });
  });

The CSS is to large to post, but you can link this file :

http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css

回答3:

No. A simple review of the docs may be useful. Java applets have similarly (but distinctly different) styled UI elements that may be what you've seen in the past.

If you wanted to you could create your own dialog boxes using HTML/CSS/JavaScript that act like user agent dialog boxes, but that's a lot of work for the result.

来源：https://stackoverflow.com/questions/16929370/how-to-personalize-alert-buttons-window-confirm-and-window-alert

标签

javascript

jquery

popup