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