How to Create Beautiful and Custom Alerts Using Javascript SweetAlert

How to Create Beautiful and Custom Alerts Using Javascript SweetAlert

How to Create Beautiful and Custom Alerts Using Javascript SweetAlert

What will you learn in this totrial?

  • You will learn about SweetAlert JavaScript library
  • You will learn how to setup SweetAlert library on your website
  • You will learn how to create beautiful alerts using SweetAlert library

Required Skills.

  • Basic HTML and CSS knowledge is required
  • Basic JavaScript knowledge is required
  • You need a Text Editor, web browser and internet connection to download some resources.

Introduction

SweetAlert is an open source project javascript library that allows designers to replace default javascript alert with a more advanced and beautiful one. SweetALert makes popups and modals messages look pretty and easy to use even for beginners.

For this tutorial, we’re going to setup a simple webpage to show the work of SweetAlert JavaScript library while also showing the default JS alert alongside it. We’ll create two buttons, one will demonstrate SweetAlert and the other one Defualt JS alert.

Default alert image

 

Sweetalert image

STEPS

Setup web page

We need to follow the following steps below to create our web page;

  1. Launch your text editor and create a new file and save it as "index.html" in your development folder.
  2. Write down the standard HTML5 tags used in defining a HTML document in "index.html" file. Example;
<html>

  <head>

    <title>Beautiful and sweet alerts using SweetAlert</title>

  </head>

<body>

   

</body>

</html>

In order to integrate SweetAlert.JS into our page. We have to download the library from the official repo here  once downloaded, you can include the JavaScript and css files with the usual scripts and links element as you would do for any other JavaScript and css libraryies:

<link href=" path/to/bootstrap.min.css" rel="stylesheet">

<link href=" path/to/sweetalert.css" rel="stylesheet">

<script type="text/javascript" src=" path/to/jquery.js"></script>

<script type="text/javascript" src=" path/to/bootstrap.min.js"></script>

<script type="text/javascript" src=" path/to/sweetalert.js"></script>

Code setup image

Setup SweetAlert.JS:

  1. Locate the <body> section in "index.html" and create two buttons with onclick attribute like the one below. The classes are that of bootstrap.
<button class="btn btn-lg btn-primary" onclick="sweetAlert()">SweetAlert</button>

<button class="btn btn-lg btn-success" onclick="defualtAlert()">DefaultAlert</button>

 write down the following code to initiate SweetAlert between <script>  before closing </body> tag

function defualtAlert() {

      alert("I'm a boring and ugly Alert!");

    }

Preview in browser

Screenshot below shows the default JS Alert after clicking the green button.

Preview in browser

Screenshot below shows the sweetalert after clicking the green button.

These are just some of the options and methods we can use in SweetAlert library. You can check the official documentation for more.

Source code

Here is a full source code of this tutorial.

<html>

            <head>

                        <title>Beautiful and sweet alerts using SweetAlert</title>

                         <link href="css/bootstrap.min.css" rel="stylesheet">

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

            </head>

            <body>

           

            <div class="examples">

       

        <button class="btn btn-lg btn-primary" onclick="sweetAlert()">SweetAlert</button>

                        <button class="btn btn-lg btn-success" onclick="defualtAlert()">DefaultAlert</button>

      </div>

           

            <script src="js/jquery.js"></script>

            <script src="js/bootstrap.min.js"></script>

            <script type="text/javascript" src="js/sweetalert.js"></script>

           

            <script>

           

                        function defualtAlert() {

      alert("I'm a boring and ugly Alert!");

    }

            function sweetAlert() {

            swal('Congratulations!', 'Your message has been succesfully sent', 'success');

            }

            </script>

            </body>

</html>

We hope you may learn how to use Sweetalert. Please share your thoughts in the comment section below.

Source code download link

Click here to download full source code