Customize Alert Modals in Bootstrap 5 with Clean Alert

Category: Javascript , Modal & Popup | May 20, 2024
Author:felipetr
Views Total:44 views
Official Page:Go to website
Last Update:May 20, 2024
License:MIT

Preview:

Customize Alert Modals in Bootstrap 5 with Clean Alert

Description:

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

You Might Be Interested In:


Leave a Reply