Why JavaScript dialogs (alert/prompt/confirm) are not widely used?

Recently I started working on a small open-source project side project with Vue, and I wanted to create yes/no dialog (basically a model) which will show a notification with a confirm and cancel button. So users can confirm or cancel an event.

However, since I don’t want to reuse my code and repeat the same code, I created a separate Vue component called notification just to show a notification with a yes/no button.

Then I came across this problem, how am I going to handle the event? The notification will be triggered by different events, and upon confirmation it should run different events, depending on the parent event which fired it.

How am I going to track of the parent event which triggered the notification and child event that should run upon confirmation? By the way I also need to pass parameters to the child event as well. For example let’s look at changing the text inside a DOM element.

This is a very ugly approach, I have to set a state with parameters for the child event (the event that is triggered when confirmed), or else I have to pass the parameters to the notification and re-send it again to the child event.

I’m stating it again, it would not be an issue if I just fire the notification once, but I wanted to have a notification component to avoid reusing the same code over and over again.

However, this would have been so much easier if I used a confirm dialog in Javascript. Show the confirmation box, if the return value is true then do one thing, if cancel then do another thing or just discards it.

However, javascript alerts and prompts are considered an anti-pattern and are not widely used. So I decided to do a Google search and this is the first answer I came across on StackOverflow.

alert displays a modal dialog box which effectively disables the browser UI until it is dismissed. Most developers consider that to be bad design and most users consider that irritating.

One of the main issues that I find with modal dialogs is that they don’t let me open a new tab and do a quick Google search before responding to them.

StackOverflow – https://stackoverflow.com/a/2577142/1601443

Even in this STO answer, the first reason for avoiding alert is that they block the browser window, and requires user interaction (cannot automate) which is the exact reason why we fire a confirmation box, because we need user interaction before we proceed with an action.

What’s the real reason to avoiding alert and confirm box other than the aesthetics of them? Yes, yes they can be ugly but they can make something complicated so much easier, and implemented across all browsers.

Maybe the way I implemented my notification is wrong. If so please let me know it as a comment. I’m happy to hear all your suggestions.