Javascript beautiful sweetalert2 plugin

266 views 11 months ago Javascript

Sweetalert2 is opensource simple and standalone javascript plugin which provides responsive and beautiful popup modal boxes. With the help of sweetalert2, you can improve your web applcation UI. Sweetalert2 is written in pure Javascript, so you don't need to add any dependencies to use Sweetalert2 plugin.

You can use sweetalert2 to display success or error message or if you need user confirmation. In this article, we will discuss how to use sweetalert2 plugin in web application.

Installation

First download plugin from Github.

And initialise by adding below tags in <head> section.

<script src="sweetalert2/dist/sweetalert2.min.js"></script>
<link rel="stylesheet" href="sweetalert2/dist/sweetalert2.min.css">

Or you can simply add files from CDN providers.

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/limonte-sweetalert2/11.0.18/sweetalert2.min.css"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/limonte-sweetalert2/11.0.18/sweetalert2.min.js"></script>

Basic usage

Now use Swal.fire() method to launch sweetalert2 box.

Swal.fire('Welcome to the  Hello World!');

Bind with button

You can also popup message on event like click or response to Ajax response.

<!DOCTYPE html>
<html>
<head>
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/limonte-sweetalert2/11.0.18/sweetalert2.min.css"/>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/limonte-sweetalert2/11.0.18/sweetalert2.min.js"></script>
</head>
<body>
    <div class="container mt-3 text-center">
        <button type="button" class="btn btn-info" onclick="showMessage()">Show Message!</button>
    </div>
    <script type="text/javascript">
        function showMessage() {
            Swal.fire({
                icon: 'error',
                title: 'Oops...',
                text: 'Something went wrong!',
                footer: '<a href="">Why do I have this issue?</a>'
            });
        }
    </script>
</body>
</html>

Sweetalert provides variety of options to pass as object to configure.

Option	Description
title	The title of the popup box.
titleText	The title of the popup, as text.
html	A HTML code of description for the popup box.
text	A description for the popup.
icon	The icon of the popup. SweetAlert2 provides animated icons for: warning, error, success, info, and question
iconColor	Use this to change the color of the icon.
footer	The footer of the popup box.
backdrop	Whether or not SweetAlert2 should show a full screen click-to-dismiss backdrop.
input	Input field like text, email, password, number, tel, range, textarea, select, radio, checkbox, file and url.
width	Popup window width, including paddings.
padding	Popup padding.
background	Popup window background.
Popup window background	Popup window position, can be 'top', 'top-start', 'top-end', 'center', 'center-start', 'center-end', 'bottom', 'bottom-start', or 'bottom-end'.
timer	Auto close timer of the popup. Set in milliseconds.
width	Popup window width, including paddings.
padding	Popup padding.
showConfirmButton	If set to false, a "Confirm"-button will not be shown.
showDenyButton	If set to true, a "Deny"-button will be shown.
showCancelButton	If set to true, a "Cancel"-button will be shown which will dismiss the modal.

Sweetalert2 also provides handling button.

Option	Description
isConfirmed	The "Confirm" button was clicked, the value will contain the result.
isDenied	The "Deny" button was clicked.
isDismissed	The "Cancel" button was clicked.
value	The value from the popup, possible values: true for simple confirmed false for denied popups
dismiss	The dismissal reason.

You can also change sweetalert2 theme also. For more configurations and details, check the official website.

Author : Harsukh Makwana

Hi, My name is Harsukh Makwana. i have been work with many programming language like php, python, javascript, node, react, anguler, etc.. since last 5 year. if you have any issue or want me hire then contact me on [email protected]