A Better JavaScript Popup Box

As a JavaScript developer it is almost impossible to get around using the built in alert function which gives us that default looking popup box. Truth is it works perfect in situations where we just want to say “Here…” or return a variable to screen. Many of us use it while debugging JavaScript code while some may even use it to interact with the user. Overall the built-in alert function is great.

Default Alert Popup box alert(“Hello World!”)

Now, what about those special cases where we want to show the user something a little more elegant, a popup box that we are able to style. It’s definitely a plus to have our JavaScript Popup Box look and feel similar to our web app, right?

Introducing SweetAlert, A Better JavaScript Popup Box for your messages, alerts and even for interaction with your users. SweetAlert is a nifty JavaScript plugin that makes popups elegant, responsive and customization. It’s only 47KBs, comprises of just two files and provides modals for warning, error, success and info popup boxes. For a complete documentation checkout https://sweetalert.js.org

SweetAlert Popup box

THE CODE (A Warning Alert Message)

//INCLUDE JAVASCRIPT AND CSS
<script src="sweetalert.js"></script>
<link rel="stylesheet" href="sweetalert.css">

swal({
  title: "Are you sure you want to leave?",
  text: "You have unsaved changes!",
  type: "warning",
  showCancelButton: true,
  confirmButtonClass: "btn-danger",
  confirmButtonText: "Yes, Exit!",
  closeOnConfirm: false
},
function(){
  swal("Deleted!", "Your imaginary file has been deleted.", "success");
});

Tell us what you think about this plugin as well as what you use for custom alerts and messages in your web apps.

Happy Coding!

DEMODOWNLOAD