In Javascript How can I customize alert window?

Question

In a static html page i want to do following actions:

as the url is entered first I want to display the terms and conditions using window.alert("TERMS AND CONDITIONS").
In the dialogue box I want two buttons "agree" and "dont agree". If agree is pressed I want to use window.location.assign("next page url") .And if dis agree is pressed I want to use window.close("","_self")

I'm a total beginner and have minimum knowledge of Javascript.

Thank you in advance.

You can override the default alert with `window.alert = function (msg) { console.log('now alert goes to log: ', msg); }`. So, you will need to build your own alert popup from scratch — Jose Rui Santos, Jul 20 '15 at 12:04
@ChenKinnrot When I use your code from the downloaded folder it works perfectly, When I copy those codes in new file and press Open model it just adds #ex1 to the url. — sigdelsanjog, Jul 20 '15 at 17:45
@ChenKinnrot I see your code works completely and your model is attractive. But I am having problem in even understanding everything you already mention. Would you please answer it so that I can understand it clearly and also accept the answer. Thanks in advance — sigdelsanjog, Jul 20 '15 at 18:10

score 2 · Answer 1 · answered Jul 20 '15 at 11:56

2

You can not modifiy the default alert dialog.

But instead, you can use one of the many Dialogs made for jquery and other libraries.

answered Jul 20 '15 at 11:56

Oscar

1

You can not modify the default alert dialog, but you can override it to do something else. – Jose Rui Santos Jul 20 '15 at 12:06

score 1 · Answer 2 · answered Jul 20 '15 at 11:58

1

The alert box is a system object, and not subject to CSS. The jQuery UI Modal box does a lot of the work for you Link.

answered Jul 20 '15 at 11:58

Shrinivas Pai

score 1 · Answer 3 · answered Jul 20 '15 at 11:59

if you want a basic browser graphic u can use

window.confirm("TERM AND CONDITIONS");

that return true or false based on action. For more advaced usage check jquery dialogs boxes (docs https://jqueryui.com/dialog/ ) or bootstrap (docs http://nakupanda.github.io/bootstrap3-dialog/)

3 Answers3