Clean Alert is a JavaScript plugin designed to create customizable, user-friendly alert dialogs within Bootstrap 5 projects.
It provides customization options for alert type, size, background color, and action button. Each alert type boasts a unique animated SVG icon to improve the user experience.
How to use it:
1. Download and include ‘cleanalert.js’ and ‘cleanalert.css’ into your Bootstrap project:
<!-- Bootstrap 5 framework --> <link rel="stylesheet" href="/path/to/cdn/bootstrap.min.css" /> <script src="/path/to/cdn/bootstrap.bundle.min.js"></script> <!-- Cleanalert plugin --> <link rel="stylesheet" href="/path/to/dist/cleanalert.css" /> <script src="/path/to/dist/cleanalert.js"></script>
2. You can add buttons to trigger different types of alert modals. Each button uses specific data attributes to define the alert type and message.
<button class="btn btn-primary clenalertbtn" data-title="Info Alert" data-text="This is a info alert" data-type="info" >Info Alert</button> <button class="btn btn-warning clenalertbtn" data-title="Warning Alert" data-text="This is a warning alert" data-type="warning">Warning Alert</button> <button class="btn btn-success clenalertbtn" data-title="Success Alert" data-text="This is a success alert" data-type="success">Success Alert</button> <button class="btn btn-danger clenalertbtn" data-title="Danger Alert" data-text="This is a danger alert" data-type="danger">Danger Alert</button>
3. Adjust the size of the alert modals by specifying the ‘data-size’ attribute:
<button class="btn btn-primary clenalertbtn" data-title="Small Info Alert" data-text="This is a small info alert" data-type="info" data-size="sm" >Small Info Alert</button> <button class="btn btn-primary clenalertbtn" data-title="Medium Info Alert" data-text="This is a medium info alert" data-type="info" data-size="md" >Medium Info Alert</button> <button class="btn btn-primary clenalertbtn" data-title="Large Info Alert" data-text="This is a large info alert" data-type="info" data-size="lg" >Large Info Alert</button>
4. Set different background colors for the alert modals using the ‘data-bg’ attribute:
<button class="btn btn-primary clenalertbtn" data-title="Light Alert" data-text="This is a light info alert" data-type="info" data-bg="light" >Light Modal</button> <button class="btn btn-primary clenalertbtn" data-title="Dark Alert" data-text="This is a dark info alert" data-type="info" data-bg="dark" >Dark Modal</button>
5. Personalize the action buttons:
<button class="btn btn-primary clenalertbtn" data-title="Info Alert w/ Danger Button" data-text="This is a info alert" data-type="info" data-btntype="danger" >Info Alert w/ Danger Button</button> <button class="btn btn-primary clenalertbtn" data-title="Info Alert w/ Custom Button Text" data-text="This is a info alert" data-type="info" data-btntext="Okay" >Info Alert w/ Custom Button Text</button>
6. You can also trigger an alert modal programmatically using the following syntax:
callalert(title, text, type, btntext, btntype, size, bg);
The post Customize Alert Modals in Bootstrap 5 with Clean Alert appeared first on CSS Script.