Overview
SweetAlert is a beautiful, responsive, customizable, accessible (WAI-ARIA) replacement for JavaScript's popup boxes. For more info please visit the plugin's Website or Github Repo.
Usage
SweetAlert's Javascript bundles are globally included in all pages.
<link href="assets/plugins/global/plugins.bundle.css" rel="stylesheet" type="text/css"/>
<script src="assets/plugins/global/plugins.bundle.js"></script>Initialization
-
SweetAlert is initialized via Javascript only by adding
Swal.fire()at any point to trigger it. - There are a variety of configuration options within SweetAlert. Please refer to the official documentation for more info.
Basic
Here's a basic example of SweetAlert.
const button = document.getElementById('kt_docs_sweetalert_basic');
button.addEventListener('click', e =>{
e.preventDefault();
Swal.fire({
text: "Here's a basic example of SweetAlert!",
icon: "success",
buttonsStyling: false,
confirmButtonText: "Ok, got it!",
customClass: {
confirmButton: "btn btn-primary"
}
});
});<button type="button" id="kt_docs_sweetalert_basic" class="btn btn-primary">Toggle SweetAlert</button>HTML
Here's an example of SweetAlert with HTML content.
const button = document.getElementById('kt_docs_sweetalert_html');
button.addEventListener('click', e =>{
e.preventDefault();
Swal.fire({
html: `A SweetAlert content with <strong>bold text</strong>, <a href="#">links</a>
or any of our available <span class="badge badge-primary">components</span>`,
icon: "info",
buttonsStyling: false,
showCancelButton: true,
confirmButtonText: "Ok, got it!",
cancelButtonText: 'Nope, cancel it',
customClass: {
confirmButton: "btn btn-primary",
cancelButton: 'btn btn-danger'
}
});
});<button type="button" id="kt_docs_sweetalert_html" class="btn btn-primary">Toggle HTML SweetAlert</button>All States
Here are examples for each of SweetAlert's states.
const button = document.getElementById('kt_docs_sweetalert_basic');
button.addEventListener('click', e =>{
e.preventDefault();
Swal.fire({
text: "Here's a basic example of SweetAlert!",
icon: "success",
buttonsStyling: false,
confirmButtonText: "Ok, got it!",
customClass: {
confirmButton: "btn btn-primary"
}
});
});<button type="button" id="kt_docs_sweetalert_state_info" class="btn btn-info">Toggle Info</button>
<button type="button" id="kt_docs_sweetalert_state_warning" class="btn btn-warning">Toggle Warning</button>
<button type="button" id="kt_docs_sweetalert_state_error" class="btn btn-danger">Toggle Error</button>
<button type="button" id="kt_docs_sweetalert_state_success" class="btn btn-success">Toggle Success</button>
<button type="button" id="kt_docs_sweetalert_state_question" class="btn btn-primary">Toggle Question</button>
2024©
Keenthemes
