November 9, 2017 1410 Views 0 Comment

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


SweetAlert Popup box


THE CODE (A Warning Alert Message)

<script src="sweetalert.js"></script>
<link rel="stylesheet" href="sweetalert.css">

  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
  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!