Geek Answers Handbook

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

I saw many websites that personalized their windows with warning and confirmation with different button text.

By default, this will display the JavaScript window.confirm() function:

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

But what if I need a setting, such as custom header text, and custom button text?

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

Can this be done in JavaScript, jQuery or AJAX (or another language)? If so, could you show me an example? Thank you

+8
javascript jquery popup
source share
3 answers

I will not find anything new here. And the created comments speak of the most relevant information.

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

On this site you can find examples of warnings, dialogs, and other useful tools. eg.

confirm dialog personalized

To use the mentioned soft:

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

I just did it and it works great! (In Firefox and Chromium)

NOTE I tested it with the new version of BootStrap (v.3) and it does not work.

+3
source share

The simple answer is: you cannot, the hints do not support this function,

However, you can use jquery or create your own modal / dialog to emulate this function.

See jQuery UI Dialo for ideas and examples.

Set up an example from the page to check 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" ); } } }); });

CSS for large posts, but you can link this file:

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

+5
source share

Not. A simple overview of the documents may be helpful. Java applets have similar (but completely different) stylized user interface elements, which may be what you saw in the past.

If you want you to be able to create your own dialogs using HTML / CSS / JavaScript, which act as user agent dialogs, but this is a lot of work for the result.

+1
source share

More articles:


All Articles