EN
JavaScript - beautiful html alerts with Sweet Alert 2 - full code examples
5 points
xxxxxxxxxx1
2
<html>3
<head>4
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@9"></script>5
</head>6
<body style="font-family: sans-serif; ">7
<div style="height: 500px;">8
<button onclick="fireSweetAlert()">Show sweet alert example</button>9
</div>10
<script>11
12
function fireSweetAlert() {13
Swal.fire(14
'Good job!',15
'You clicked the button!',16
'success'17
)18
}19
20
</script>21
</body>22
</html>Screenshot with expected results:
xxxxxxxxxx1
2
<html>3
<head>4
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@9"></script>5
</head>6
<body style="font-family: sans-serif; ">7
<div style="height: 500px;">8
<button onclick="fireSweetAlert()">Show sweet alert example</button>9
</div>10
<script>11
12
function fireSweetAlert() {13
Swal.fire({14
icon: 'info',15
title: 'Info',16
text: 'You clicked the button!'17
})18
}19
20
</script>21
</body>22
</html>Screenshot with expected results:
xxxxxxxxxx1
2
<html>3
<head>4
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@9"></script>5
</head>6
<body style="font-family: sans-serif; ">7
<div style="height: 500px;">8
<button onclick="fireSweetAlert()">Show sweet alert example</button>9
</div>10
<script>11
12
function fireSweetAlert() {13
Swal.fire({14
icon: 'error',15
title: 'Oops...',16
text: 'Something went wrong!'17
})18
}19
20
</script>21
</body>22
</html>Screenshot with expected results:
xxxxxxxxxx1
2
<html>3
<head>4
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@9"></script>5
<style>6
.btn {7
margin: 10px;8
}9
</style>10
</head>11
<body style="font-family: sans-serif; ">12
<div style="height: 500px;">13
14
<div class="btn"><button onclick="showSuccessAlert()">Show success</button></div>15
<div class="btn"><button onclick="fireInfoAlert()">Show info</button></div>16
<div class="btn"><button onclick="showError()">Show error</button></div>17
<div class="btn"><button onclick="showMessage()">Show message</button></div>18
19
<div class="btn">20
<button onclick="showAlertTopEnd()">21
Show alert in top right corner22
</button>23
</div>24
25
<div class="btn">26
<button onclick="showDialogWithPassingParams()">27
Show dialog with second alert on yes28
</button>29
</div>30
31
</div>32
<script>33
34
function showSuccessAlert() {35
Swal.fire(36
'Good job!',37
'You clicked the button!',38
'success'39
)40
}41
42
function fireInfoAlert() {43
Swal.fire({44
icon: 'info',45
title: 'Info',46
text: 'You clicked the button!'47
})48
}49
50
function showError() {51
Swal.fire({52
icon: 'error',53
title: 'Oops...',54
text: 'Something went wrong!'55
})56
}57
58
function showMessage() {59
Swal.fire('Simple message')60
}61
62
function showAlertTopEnd() {63
Swal.fire({64
position: 'top-end',65
icon: 'success',66
title: 'Display this alert in top right corner',67
showConfirmButton: false,68
timer: 250069
})70
}71
72
function showDialogWithPassingParams() {73
Swal.fire({74
title: 'Are you sure?',75
text: "You won't be able to revert this!",76
icon: 'warning',77
showCancelButton: true,78
confirmButtonColor: '#3085d6',79
cancelButtonColor: '#d33',80
confirmButtonText: 'Yes, delete it!'81
}).then((result) => {82
if (result.value) {83
Swal.fire(84
'Deleted!',85
'Your file has been deleted.',86
'success'87
)88
}89
})90
}91
92
</script>93
</body>94
</html>