Skip to content

WebNinjaDeveloper.com

Programming Tutorials




Menu
  • Home
  • Youtube Channel
  • PDF Invoice Generator
Menu

Javascript SweetAlert2 Example to Show Popup Alert Messages in Browser Full Example For Beginners

Posted on March 25, 2023

 

 

Welcome folks today in this blog post we will be showing popup alert messages in browser using the sweetAlert2` library in javascript. All the full source code of the application is shown below.

 

 

Get Started

 

 

In order to get started you need to make an index.html file and copy paste the following code

 

 

index.html

 

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>SweetAlert2 Dialog Box Examples</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/sweetalert2@11.1.5/dist/sweetalert2.min.css">
  <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11.1.5/dist/sweetalert2.min.js"></script>
</head>
<body>
  <h1>SweetAlert2 Dialog Box Examples</h1>
  <button id="alert-btn">Alert Dialog</button>
  <button id="confirm-btn">Confirm Dialog</button>
  <button id="prompt-btn">Prompt Dialog</button>
  <button id="success-btn">Success Dialog</button>
  <button id="error-btn">Error Dialog</button>
  <button id="warning-btn">Warning Dialog</button>
  <button id="info-btn">Info Dialog</button>
  <button id="question-btn">Question Dialog</button>
</body>
</html>

 

 

As you can see we are including the cdn of the sweetalert2 library at the top and then inside the html we have different buttons for showing the different popup alert messages supported by the sweetalert2 library. Now we need to add the javascript code to show the actual alert messages as shown below

 

 

index.js

 

 

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
const alertBtn = document.getElementById('alert-btn');
    const confirmBtn = document.getElementById('confirm-btn');
    const promptBtn = document.getElementById('prompt-btn');
    const successBtn = document.getElementById('success-btn');
    const errorBtn = document.getElementById('error-btn');
    const warningBtn = document.getElementById('warning-btn');
    const infoBtn = document.getElementById('info-btn');
    const questionBtn = document.getElementById('question-btn');
 
    alertBtn.addEventListener('click', () => {
      Swal.fire('This is an alert dialog box!');
    });
 
    confirmBtn.addEventListener('click', () => {
      Swal.fire({
        title: 'Are you sure?',
        text: 'You won\'t be able to revert this!',
        icon: 'warning',
        showCancelButton: true,
        confirmButtonText: 'Yes, delete it!',
        cancelButtonText: 'No, cancel!',
        reverseButtons: true
      }).then((result) => {
        if (result.isConfirmed) {
          Swal.fire('Deleted!', 'Your file has been deleted.', 'success');
        } else if (result.dismiss === Swal.DismissReason.cancel) {
          Swal.fire('Cancelled', 'Your file is safe :)', 'error');
        }
      });
    });
 
    promptBtn.addEventListener('click', () => {
      Swal.fire({
        title: 'Enter your name',
        input: 'text',
        inputLabel: 'Name',
        inputPlaceholder: 'Enter your name',
        showCancelButton: true,
        inputValidator: (value) => {
          if (!value) {
            return 'You need to enter a name!';
          }
        }
      }).then((result) => {
        if (result.isConfirmed) {
          Swal.fire(`Hello ${result.value}!`);
        }
      });
    });
 
    successBtn.addEventListener('click', () => {
      Swal.fire('Success!', 'Your action has been completed.', 'success');
    });
 
    errorBtn.addEventListener('click', () => {
      Swal.fire('Error!', 'Something went wrong.', 'error');
    });
 
    warningBtn.addEventListener('click', () => {
      Swal.fire('Warning!', 'Please be careful.', 'warning');
    });
 
    infoBtn.addEventListener('click', () => {
      Swal.fire('Info!', 'This is an informative message.', 'info');
    });
 
    questionBtn.addEventListener('click', () => {
      Swal.fire({
        title: 'Are you sure?',
        text: 'Do you want to continue?',
        icon: 'question',
        showCancelButton: true,
        confirmButtonText: 'Yes',
        cancelButtonText: 'No'
      }).then((result) => {
        if (result.isConfirmed) {
          Swal.fire('Confirmed!', 'You have clicked Yes.', 'success');
        } else if (result.dismiss === Swal.DismissReason.cancel) {
          Swal.fire('Cancelled', 'You have clicked No.', 'error');
        }
      });
    });

 

 

As you can see we are getting all the references of the buttons and then we are attaching the onClick listener to each of the buttons and then we are showing the alert messages using the sweetAlert2 library. For this we are using the Swal.fire() method and inside it we are passing the type of alert that we want to show. This can support success alert,warning,info or error alert messages as shown below

 

 

 

 

Recent Posts

  • Python 3 Flask Project to Export Multiple PDF Documents to Word Docx Files Using pdf2docx Library in Browser
  • Build a Fixed Deposit Interest Calculator Using Amount and Time in Browser Using HTML5 & Javascript
  • Python 3 Script to Convert PDF Document to Microsoft Word DOCX File Using pdf2docx Library
  • Node.js Express Project to Remove Background of Images Using Rembg & Formidable Library in Browser
  • Node.js Tutorial to Remove Background From Image Using Rembg & Sharp Library in Command Line
  • Angular
  • Bunjs
  • C#
  • Deno
  • django
  • Electronjs
  • java
  • javascript
  • Koajs
  • kotlin
  • Laravel
  • meteorjs
  • Nestjs
  • Nextjs
  • Nodejs
  • PHP
  • Python
  • React
  • ReactNative
  • Svelte
  • Tutorials
  • Vuejs




©2023 WebNinjaDeveloper.com | Design: Newspaperly WordPress Theme