Create custom alert with sweetAlert jQuery plugin

Alert is one of the most used functions in JavaScript. By this, you can 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, etc.

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 a custom message box on the screen and use it as an alternative to the default alert box.

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

---

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 the jQuery library.

<link href="sweetalert.css" type="text/css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></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 a given time

Example –

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

 

View Demo

---

3. Type of Message Box

You can show the 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" 
});

View Demo

---

4. Customize theme

You can change the appearance of the message box by changing its theme. The plugin has a 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">

View 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 that 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"
});

View Demo

---

6. Conclusion

If you get bored with the 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 found this tutorial helpful then don't forget to share.