bootstrap-show-notification

A Bootstrap plugin, to create fixed Alerts (also called Notifications) dynamically in JavaScript.

Examples

Show a simple notification

Show a more complex info-notification with Button handling

Show a danger-notification

Show a sticky notification with infinite duration

Usage

<script src="./node_modules/bootstrap-show-notification/src/bootstrap-show-notification.js"></script>
<script>
    document.getElementById("button-show-simple").addEventListener("click", function () {
        bootstrap.showNotification({body: "Hello Notification!"})
    })
    document.getElementById("button-show-info").addEventListener("click", function () {
        const notification = bootstrap.showNotification({
            body: "<h3>For your Info</h3><p>This notification has a headline and more text than the previous one.</p><div><button class='btn btn-info me-3'>Click me</button><button class='btn btn-outline-secondary'>Close this Notification</button></div>",
            type: "info",
            duration: 20000
        })
        notification.element.querySelector(".btn-info").addEventListener("click", () => {
            bootstrap.showNotification({
                body: "Thank you for clicking", type: "success", direction: "append"
            })
        })
        notification.element.querySelector(".btn-outline-secondary").addEventListener("click", () => {
            const alert = bootstrap.Alert.getOrCreateInstance(notification.element)
            alert.close()
        })
    })
    document.getElementById("button-show-danger").addEventListener("click", function () {
        bootstrap.showNotification({
            body: "Danger!", type: "danger"
        })
    })
    document.getElementById("button-show-sticky").addEventListener("click", function () {
        bootstrap.showNotification({
            body: "This notification will stay", type: "secondary", duration: 0
        })
    })
</script>
    

Repository and Documentation