Learn how to provide custom alerts to your users using jQuery.
Providing feedback to users on your web page or application is a common thing to do. If you’re using jQuery then you might be wondering how to use the jQuery alert function. The bad news is, there is no jQuery alert function built directly into the framework. In this article, i’ll talk you through the various options to create a popup for users using jQuery.
jQuery alert (using a bit of JavaScript)
Your first option is to place the standard JavaScript code for an alert box inside a jQuery call. For example, say you want to trigger an alert when a button is clicked:
Alternatively, you might want to create an alert for something you’ve selected with jQuery i.e. you have the the value of an element selected by jQuery that you want to create an alert for. Using the previous button example again:
So that was the quick, simple version. Let’s now take a look at some alternatives to creating a jQuery alert.
jQuery alert with jQuery UI
If you want to include the jQuery UI in your project then you can make use of the Dialog component to create a more advanced type of jQuery alert. 
As you can see, the dialog component produces a nice, draggable container that you can add pretty much any content to that you wish. To setup jQuery UI and create a dialog component:
// Include the jQuery UI library via a CDN (don't forget to include jQuery before this!)
You then just need to define the HTML for the dialog, i.e. how you want the alert box to appear:
Put whatever text you want inside the alert, it will be shown when the button is pressed.
It might not suit all use cases, but it’s definitely an alternative to creating a nice jQuery alert and it allows you to put any HTML content you want in the popup.
Using a jQuery alert plugin
The third option you have for creating a jQuery alert is to use a third party plugin. As with other jQuery plugins, there is a huge list to choose from so i’ve highlighted just some of the better ones for you here. You can check out more examples in the jQuery plugin registry at https://plugins.jquery.com/
Alertify.js
Although it’s no longer maintained, Alertify.js is a simple plugin that will provide a direct replacement for your browsers rather plain alert box. 
There is also options for confirm and prompt dialogs along with more advanced options such as notifications in the corner of the screen and timeouts. Take a look at http://fabien-d.github.io/alertify.js/ for more info and for full setup instructions.
Toastr
One thing with presenting a user with an alert box is that it can sometimes be a bit intrusive and a pain to keep having to click to close the notifications. A possible solution to this is to send a Toast notification (a small little panel that appears somewhere on the page then disappears after a few seconds). There is a great little jQuery plugin called Toastr which can achieve this. If you want to check this out or add it to your project, check out the video tutorial I made on setting up Toastr in your project. You can get hold of the Toastr plugin at https://codeseven.github.io/toastr/
NotifyJS
The final plugin i’m going to mention is NotifyJS. 
It’s quite similar to Toastr in that it creates toast notifications in the corners of your page but it can also be used to add these kind of pop up notifications to specific elements. For example, you can add a pop up to a particular div or p element. You can get hold of NotifyJS at https://notifyjs.com/
Conclusion
So jQuery doesn’t make it easy for us to create a customisable alert box on your page. You can either make do with the browser’s default alert box and trigger this using the standard JavaScript syntax or you can use a plugin. Using a plugin is a great way to completely change the look and feel of these alerts and can also be used to display informative ‘Toast’ notifications rather than an annoying alert that needs to be clicked to close. How do you handle alerts with jQuery? Got a favourite plugin? Let me know in the comments below.