bootstrap-show-notification

A jQuery plugin wrapper around Bootstrap 4 Alerts, 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>
    $("#button-show-simple").click(function () {
        $.showNotification({body: "Hello Notification!"})
    })
    $("#button-show-info").click(function () {
        const notification = $.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 mr-3'>Click me</button><button class='btn btn-outline-info'>Close this Notification</button></div>",
            type: "info",
            duration: 20000
        })
        notification.$element[0].querySelector(".btn-info").addEventListener("click", () => {
            $.showNotification({
                body: "Thank you for clicking", type: "success", direction: "append"
            })
        })
        notification.$element[0].querySelector(".btn-outline-info").addEventListener("click", () => {
            notification.$element.alert("close")
        })
    })
    $("#button-show-danger").click(function () {
        $.showNotification({
            body: "Danger!", type: "danger"
        })
    })
    $("#button-show-sticky").click(function () {
        $.showNotification({
            body: "This notification will stay", type: "secondary", duration: 0
        })
    })
</script>