Bootstrap 5 : jQuery Toast Builder

bs_toast.js

var toastIDCounter = 0;

(function ($) {
    $.fn.bsToast = function (options) {
        if (typeof options === "string") {
            options = {
                body: options
            }
        }
        var settings = $.extend({
            // These are the defaults.
            body: "MISSING body: <br/>$(...).bsToast({body: 'toast body text here'})<br/><strong><em>html is OK!</em></strong>",
            animation: true, // Apply a CSS fade transition to the toast
            autohide: true,	 // Auto hide the toast
            delay: 3000,	 // Delay hiding the toast (ms)
            dispose: true
        }, options);

        var $toastContainer = $("#toast-container");

        if ($toastContainer.length === 0) {
            // re-create toastPosition and toastContainer
            var $toastPosition = $("<div>", {
                "id": "toast-position",
                "aria-live": "polite",
                "aria-atomic": "true",
                "style": "position: fixed; min-height: 200px;top: 20px;right: 40px;min-width: 100%;max-width: 500px;"
            });

            $toastContainer = $("<div>", {
                "id": "toast-container",
                "style": "position: absolute; top: 0; right: 0;"
            });

            $(document.body).append($toastPosition);
            $toastPosition.append($toastContainer)
        }

        var toastid = "toast-id-" + toastIDCounter;
        toastIDCounter++

        var $toast = $("<div>", {
            "id": toastid,
            "class": "toast",
            "style": "min-width: 300px;",
            "role": "alert",
            "aria-live": "assertive",
            "aria-atomic": true
        });

        if (settings.header && settings.header.text) {
            var $header = $("<div>", {"class": "toast-header"});
            if (settings.header.logo) {
                $header.append(`<img src="${settings.header.logo}" class="rounded me-2" height="25" width="25" alt="logo">`)
            }
            $header.append(`<strong class="me-auto">${settings.header.text}</strong>`)
            // $header.append(`<small class="text-muted">just now</small>`)
            $header.append(`<button type="button" class="ms-2 mb-1 close" data-dismiss="toast" aria-label="Close"><span aria-hidden="true">&times;</span></button>`)
            $toast.append($header)
        }

        var $toastBody = $("<div>", {"class": "toast-body"});
        $toastBody.html(settings.body)
        $toast.append($toastBody)
        $toastContainer.append($toast)

        var toastEl = $toast[0]
        toastEl.addEventListener('hidden.bs.toast', toastEl.remove)
        var t = new bootstrap.Toast(toastEl, {delay: settings.delay});
        t.show()
    };

}(jQuery));

which lets you do stuff like:

$(document).bsToast({
  header: {
    text: "Your Business",
    logo: "/logo.png"
  },
  body: `You did something Awesome! <br/><a href="https://www.amazon.com" target="_blank" rel="noopener noreferrer">${e.text}</a>`
})

or more simply:

$(document).bsToast("Show me the Toast!")

Hi! Thank you for this snippet!
You should change mr-* and ml-* to me-* and ms-* respectively. According to this

Hi! Thank you for this snippet!
You should change mr-* and ml-* to me-* and ms-* respectively. According to this

Updated to the me/ms versions 👍

line 24 should be "Class" not "ID"

line 24 should be "Class" not "ID"

i don't think bootstrap has a toast-position class in their styles. I added that as ID so that the element can be referenced later.

There should be only 1 toast-position and 1 toast-container.