Create custom alert with sweetAlert jQuery plugin

Alert is one of the most used functions in the JavaScript. By this, we interact with users by showing information on the screen.

For example, use it in form validation for showing the warning on invalid input or using it to display the alert message when form successfully submitted. There are many other cases when you can use this.

But, the problem is it does not look good on the screen.

There are many free jQuery plugins that you can use to show the user-friendly message box.

In this tutorial, I introduce you with a sweetAlert jQuery plugin by which you can show custom message box on the screen and use it as an alternative to default alert box.

It looks much better than default alert and it is responsive.

Create custom alert with sweetAlert jQuery plugin
For download, the code of the demonstration demos – click the Download Button.


Contents

  1. Setup
  2. Implementing it
  3. Conclusion

1. Setup

You can download the plugin from here and before include CSS and Script file of the plugin you need to add jQuery library because it is dependent on it.

 <link href="sweetalert.css" type="text/css" rel="stylesheet">
 <script src="jquery.js" type="text/javascript"></script>
 <script src="sweetalert.min.js" type="text/javascript"></script>

2. Implementing it

You can either use sweetAlert() or swal() to show the message box.

In this article, I am using swal() for demonstration purpose.

  • Showing a simple message box.

Example –

swal("Your message.")
  • Setting title to message box

Example –

swal("Title","Your message")
  • Add custom icon

Example –

swal({
  title: "Title",
  text: "Your message",
  imageUrl: "images/image.png"
});
  • Auto close alert box on given time

Example –

swal({
  title: "Title",
  text: "Your message",
  timer: 2000
});

Demo  –

Set type of message box

You can show following types of message box –

  • success,
  • warning,
  • error,
  • info,
  • input (this I discuss in Prompt and confirm box section)

You need to specify this in type property as value.

Syntax – 

swal({ 
    title: "Title", 
    text: "Your message", 
    type: "type" 
});

Example

swal({ 
    title: "Title", 
    text: "Your message", 
    type: "success" 
});

Here, is the Demo –

Change the type from the drop-down and click the button.

Customize theme

You can change the appearance of message box by changing its theme. The plugin has the limited number of themes – facebook,google, and twitter.

You need to add CSS file of one of the theme to your page for using it.

For example, you want to use facebook theme then you can add it like this –

 <link href="sweetalert.css" type="text/css" rel="stylesheet">
 <link href="facebook.css" type="text/css" rel="stylesheet">

Demo –

Show Prompt and Confirm Box

Prompt

For showing prompt box, you need to specify the type as input. You can also handle the prompt input.

Example –

swal({
 title: "Add",
 text: "Enter your message",
 type: "input",
 showCancelButton: true,
 closeOnConfirm: false,
 inputPlaceholder: "Your message"
 },function(inputValue){
    if (inputValue != "") {
      swal("Input","You have entered : " + inputValue);
 
    }
 }
);

Confirm box

Showing a warning message box which has Cancel and the Ok button for this specifying showCancelButton:true and showLoaderOnConfirm:true.

And for changing the default text of cancel and ok by specifying confirmButtonText: “Exit” and cancelButtonText: “Stay on the page”.

Example

swal({
 title: "Alert",
 text: "Are you really want to exit",
 type: "warning",
 showCancelButton: true,
 confirmButtonText: "Exit",
 cancelButtonText: "Stay on the page"
});

Demo

Browser compatibility

SweetAlert works in most major browsers (yes, even IE). Some details:

  • IE8: (Dropped since v1.0.0-beta)
  • IE9: Works, but icons are not animated.
  • IE10+: Works!
  • Safari 4+: Works!
  • Firefox 3+: Works!
  • Chrome 14+: Works!
  • Opera 15+: Works!

3. Conclusion

If you get bored with default alert box then you can use the sweetAlert plugin for replacement. It is very easy to implement within the project.

If you liked this tutorial, feel free to share it on social media platforms.

Spread the love

Related Post

Be First to Comment

Leave a Reply

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