Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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!

like image 523
pattyd Avatar asked Jun 04 '13 23:06

pattyd


1 Answers

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.

confirm dialog personalized

To use the mentioned soft:

  1. Download the js library compressed (including js, css, etc)
  2. Unzip the file whatever you want to.
  3. Then copy and paste the example code and save this as example.html or whatever you want to.
  4. Now change the links to make it point to your downloaded files (see how I changed my file)
  5. 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.

like image 56
Lucio Avatar answered Oct 06 '22 01:10

Lucio