Custom Designed Alerts

Custom Designed Alerts
Most of the end users will not be interested in seeing default alert messages that our system provides.

default alert
In this article we are going to see some custom designed Alert Box and messages.
For this code to work, please download js and css files from Here. Also please download jquery-1.11.3.min.js file.

Sweet Alert:
We are going to see how to show custom designed alert boxes of Sweet Alert.
This sweet alert takes 3 attributes

swal(‘title’,’text’,’type’ );

Swal – Sweet Alert, you can also use SweetAlert in place of Swal
title – Title for the alert box (required)
text – Message to be displayed to the user
type – There are 4 types of type

Now let us see examples of using Sweet Alert,


We have designed 4 buttons to display 4 designs of alert.

Alert Design 1 – Will display customized alert box.
Alert Design 2 – Will display an alert box that will disappear in 2 seconds
Alert Design 3 – Will display an alert of type warning
Alert Design 4 – Will display an alert with custom image.

Alert Design 1 Output:


Alert Design 2 Output:


Alert Design 3 Output:


Alert Design 4 Output:


Read More