Purpose of alerts
The alerts in JavaScript are used to notify users of certain functions, warnings, dangerous actions, etc.
The JavaScript alerts are also used by web developers to debug or find some problem or track the values of variables.
A simple alert can be created easily, as shown below:
alert("This is a simple JavaScript alert!");
A demo to create and trigger a simple alert
In this example, a simple alert is created by using the alert keyword. As you click the button, the alert will be displayed.
Code:
<!DOCTYPE html> <html> <head> </head> <body> <button onclick="JSalert()">Click here to trigger JS alert</button> <script type="text/javascript"> function JSalert(){ alert("This is a simple JavaScript alert!"); } </script> </body> </html>
Output:
An alert with a variable value
You can use variables inside the JavaScript alert dialogues. Simply place a variable name in place of a string in double quotes and the alert will show the variable value.
This is a useful feature for developers as well for debugging applications (apart from other options, of course).
var alertstr = "Variable used in alert"; alert(alertstr);
You see, I simply used a variable name inside the alert without double quotes:
Similarly, you may concatenate a variable with a string by using the “+” operator as shown below:
Creating fancy alerts
All the alerts in the above examples are using the default browser-based style which is boring and old-fashioned.
For that, you simply need to include the JS libraries provided by alert developers in your web pages and follow their guidelines.
I will show you demos of fancy JavaScript alerts by using plug-ins. You may also see the steps to set up that plug-in for your web page after the demos.
A basic alert demo by using a plug-in
In this demo, I have used a plug-in, SweetAlert, which is available on the Github website.
This plug-in is quite simple to use. First, have a look at a few demos of different alerts.
See a basic alert demo online by using SweetAlert:
See online demo and code
The code:
<!DOCTYPE html> <html> <head> <script src="alert/dist/sweetalert-dev.js"></script> <link rel="stylesheet" href="alert/dist/sweetalert.css"> </head> <body> <button onclick="JSalert()">Show an Alert</button> <script type="text/javascript"> function JSalert(){ swal("A Basic JS alert by a plug-in"); } </script> </body> </html>
You can see that instead of using the “alert” keyword in the <script> section, I just used “swal” to create a basic alert with a message and “Ok” button to close it.
An alert with success and animation
This JavaScript-based alert can be useful for some successful actions by the user. For example, creating an account or subscribing for updates etc.
The complete JS function code to create this alert:
function JSalert(){ swal("Congrats!", ", Your account is created!", "success"); }
This function is called at the click event of the button.
You may show this alert after filling out the form by the user and upon successful entry into the database.
A JavaScript confirm dialogue example
You may use this alert type to give a warning to the user before proceeding to some critical action like “deleting an account permanently” or deleting a file etc.
The code:
<!DOCTYPE html> <html> <head> <script src="alert/dist/sweetalert-dev.js"></script> <link rel="stylesheet" href="alert/dist/sweetalert.css"> </head> <body> <button onclick="JSalert()">Show an Alert</button> <script type="text/javascript"> function JSalert(){ swal({ title: "Your account will be deleted permanently!", text: "Are you sure to proceed?", type: "warning", showCancelButton: true, confirmButtonColor: "#DD6B55", confirmButtonText: "Remove My Account!", cancelButtonText: "I am not sure!", closeOnConfirm: false, closeOnCancel: false }, function(isConfirm){ if (isConfirm) { swal("Account Removed!", "Your account is removed permanently!", "success"); } else { swal("Hurray", "Account is not removed!", "error"); } }); } </script> </body> </html>
Output:
You can see that a user is presented with a confirmation alert with a Red button to proceed or cancel the operation.
In each case, the related message is shown in the next alert with an Ok button to close the alert. You may perform an action there rather than showing alerts.
A prompt alert example
In this demo, a prompt alert is shown to take the user input before proceeding.
See online demo and code
Setting up this cool plug-in
In order to use the SweetAlert plug-in on your website, you simply need to include two dependency files in the <head> section of your webpage:
<script src=” sweetalert-dev.js”></script>
<link rel=”stylesheet” href=” sweetalert.css”>
You may place these files in folders as per your project specifications. The downloaded package contains many other files but only two files are required as mentioned earlier and used in demos.