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
Success
Delete
Warning
Error

Now let us see examples of using Sweet Alert,

op1

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:

op2

Alert Design 2 Output:

op3

Alert Design 3 Output:

op4

Alert Design 4 Output:

op5

2 thoughts on “Custom Designed Alerts

Leave a Reply

Your email address will not be published. Required fields are marked *