Custom alerts using javascript

Question

How do I create a customized alert in JavaScript? You know, like on of these:

But when you use the alert() function like:

$(function(){
    alert("ALERT");
});

It just shows the "ALERT" message with two option, OK and Cancel. Is there any way you can make buttons on it that say something else? I've heard of all that jQueryUI Dialog Box stuff, but is there anyway to do it in non-jquery, browser-run JavaScript?

I use fancybox see here https://gist.github.com/6ui11em/2642954 — Navoneel Talukdar, Jul 30 '16 at 15:34
jQuery UI doesn't have magical powers that would grant it special privileges in the browser. If you can do it in jQuery UI, you can do it with "plain" JavaScript too. — JJJ, Jul 30 '16 at 15:43

Dogoku · Answer 1 · 2016-07-30T15:47:08.127

If what you are asking is if there's a native API for creating custom dialog then the short answer is not at the moment. Most browsers only provide 3 simple dialogs out of the box: window.alert, window.confirm and window.prompt

Long answer is yes, but it's not ready yet... There's a new HTML5 element called Dialog that will allow you to create custom dialogs natively and is currently supported only by Chrome.

See https://developer.mozilla.org/en-US/docs/Web/API/HTMLDialogElement

You can make it work for other browsers using a polyfill

However this doesn't stop you from creating your own. There's tons of examples out there where people write it using plain vanilla javascript (or in some cases no javascript at all).

score 0 · Answer 2 · edited May 23 '17 at 10:28

The only way to create a custom dialog that pauses JavaScript was showModalDialog.

But it has been deprecated and probably will eventually be removed.

The modern way would be using a <dialog> element and calling its showModal() method with JavaScript. But unlike real dialogs like alert(), prompt() or confirm(), it won't pause JS.

See Why is window.showModalDialog deprecated? What to use instead? for more information.

Custom alerts using javascript

2 Answers2