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 am using sweetAlert jQuery plugin to 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


Contents

  1. Download and Include
  2. Initialize
  3. Type of Message Box
  4. Customize theme
  5. Show Prompt and Confirm Box
  6. Conclusion

1. Download and Include

  • Download the plugin from here.
  • Include sweetalert.css and sweetalert.min.js script file with jQuery library.
 <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. Initialize

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

In this article, I am using swal() method 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 


3. 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" 
});

Demo –

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


4. 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 –


5. 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


6. 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.

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!

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

Related Post

Spread the love

Be First to Comment

Leave a Reply

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