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

Question

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!

Javascript modals are [notoriously difficult (or impossible) to alter](http://stackoverflow.com/questions/823790/javascript-confirm-popup-yes-no-button-instead-of-ok-and-cancel). Your best bet is to make your own modal popup. Consider jQuery UI: http://jqueryui.com/dialog/ — showdev, Jun 05 '13 at 00:04
This is *possible*. There are a couples of post on this site where you can find useful information. e.g.: http://stackoverflow.com/q/6929416/1505348 — Lucio, Jun 05 '13 at 00:08
@pattyd No, I don't know you, your statement led me to believe that you think jQuery and AJAX are programming languages. — Madbreaks, Jun 05 '13 at 19:42

isJustMe · Answer 1 · 2013-06-06T02:21:51.717

7

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>

JS

$(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

edited Jun 06 '13 at 02:21

answered Jun 05 '13 at 00:06

isJustMe

5,452
2
31
47

thanks! i will check that out! So, those other websites didn't use JavaScript then? – pattyd Jun 05 '13 at 00:08
Yes, the used it , is just that they didn't use the navite prompts, they probably used a custom script with an overlay or modal – isJustMe Jun 05 '13 at 01:23
Oh, could you show me how to use a modal or overlay? Or would that be harder? Thanks – pattyd Jun 05 '13 at 01:26
Yes, I just added a jsfiddle and the code, but really you should read the documentation, is fairly easy – isJustMe Jun 05 '13 at 01:33
Looks great! Thanks for all the help, all of you guys! – pattyd Jun 05 '13 at 01:37
How would I use one button to open a link instead of close? Or execute some PHP? – pattyd Jun 05 '13 at 01:39
I updated the jsfiddle, to show you how to open a new window, to execute PHP you could either perform an ajax call or submit a form – isJustMe Jun 05 '13 at 01:42
how would I name that popup function, then call the function on button click? – pattyd Jun 05 '13 at 16:36
i get this unwanted result: http://snag.gy/RKGdv.jpg why is this happening?????? My code is here: http://pastebin.com/8qGbHgMe – pattyd Jun 05 '13 at 16:53
you need to add the CSS file – isJustMe Jun 05 '13 at 18:54
what CSS file? Could you post some code for the css? – pattyd Jun 05 '13 at 20:54
I added the link for a CSS file , you can use that one on your script – isJustMe Jun 06 '13 at 02:22
Thanks very much! For now I am experimenting with the answer from @Lucio... It is a very cool way to do it! Thanks for all the help! +1 – pattyd Jun 06 '13 at 02:24
1

no problem, glad to hear you got it working! – isJustMe Jun 06 '13 at 02:31

Lucio · Accepted Answer · 2013-08-08T23:11:36.530

7

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:

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.

edited Aug 08 '13 at 23:11

answered Jun 05 '13 at 00:15

Lucio

4,753
3
48
77

Hey @Lucio, I actually like this allot. I cant get it to work though! Could you give some installation steps? – pattyd Jun 05 '13 at 17:01
See my updated answer. I tested it by my self. Hopefully, will be useful :) – Lucio Jun 05 '13 at 21:43
:) also, I cant find where to download the js library compressed... that link just brings me to the home page – pattyd Jun 05 '13 at 22:49
1

Oh men, you're vague. [Here is the link](https://github.com/makeusabrew/bootbox/zipball/v3.2.0). You need to read more :) – Lucio Jun 05 '13 at 22:51
what am i doing wrong? I seriously cant get this working :( http://pastebin.com/ijyhvhCR – pattyd Jun 05 '13 at 23:14
1

@pattyd I've created [this chat room](http://chat.stackoverflow.com/rooms/31288/room-for-lucio-and-pattyd) to explain further. – Lucio Jun 05 '13 at 23:24

score 1 · Answer 3 · answered Jun 05 '13 at 00:00

1

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.

answered Jun 05 '13 at 00:00

Madbreaks

19,094
7
58
72

are you sure? I have seen this done before.... It doesn't have to be with JS,JQ,or AJAX... any other language will do – pattyd Jun 05 '13 at 00:01
2

Your question is tagged `javascript`, so my answer applies to JavaScript. – Madbreaks Jun 05 '13 at 00:04

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

3 Answers3

Linked