How to customize the position of an alert box

Question

I am using an alert box to alert some messages after some validation. Now I want to make alert box position over the control where it had a validation error.

As a default, an alert box pops up in center of page, Now I want it at some custom position, for example I have 4 textbox to be validated, textbox-3 has some incorrect data, I want the alert to be presented just above the textbox-3 instead of center of page.

Is this possible to change the display behavior of alert box? If there's no other option to go for jquery dialog box.

Answer 1

Since that is a default dialog box, you cannot position that. However, you can design your own custom alert box and position that. Or, you can use 3rd party dialog boxes, jquery ui has a nice one: http://jqueryui.com/dialog/

Answer 2

Jquery dialog box is the best option u get.Follow this:

http://jqueryui.com/dialog/

Is it possible to create a non-centered Javascript alert box?

Answer 3

Not possible. You cannot change the default alerts in the browser.

However, if you want you can create one for yourself with following options.

---

If You don't want to use 3rd party plugin go with this

Using HTML, CSS and JS : Click Here or Here

---

If you want to use a separate library for dialogs with full control? Click Here

---

If you wish to use 3rd party Plugin then there are many options available :

Using jQuery : Click Here

Using Bootstrap : Click Here or Here

Materialize CSS : Click Here

and Many more UI component libraries like PrimeNG, KendoUI etc

---