A jQuery plugin wrapper around Bootstrap Alerts, to create Notifications (Toasts)

Overview

bootstrap-show-notification

A jQuery plugin wrapper around Bootstrap 4 Alerts, to show them as toasts (also called notifications) dynamically from JavaScript.

bootstrap-show-notification Example

=>

  • Responsive and mobile friendly
  • Needs no extra CSS

Try it

Installation

npm install bootstrap-show-notification

Usage

<script src="./node_modules/bootstrap-show-notification/src/bootstrap-show-notification.js"></script>
<script>
    // simple example
    $("#button-show-simple").click(function () {
        $.showNotification({body: "Hello Notification!"})
    })
    // type info and more complex body
    $("#button-show-info").click(function () {
        $.showNotification({
            body: "<h3>For your Info</h3>This notification has a title and a body and more text than the previous one.", type: "info"
        })
    })
    // type danger
    $("#button-show-danger").click(function () {
        $.showNotification({
            body: "Danger!", type: "danger"
        })
    })
    // type secondary and sticky
    $("#button-show-sticky").click(function () {
        $.showNotification({
            body: "This notification will stay", type: "secondary", duration: 0
        })
    })
</script>

Props (defaults)

this.props = {
    body: "", // the text, shown
    type: "primary", // the appearance
    duration: 5500, // duration till auto-hide, set to `0` to disable auto-hide
    maxWidth: "520px", // the notification maxWidth
    shadow: "0 2px 6px rgba(0,0,0,0.2)", // the box-shadow
    zIndex: 100,
    margin: "1rem", // the margin (above maxWidth)
    direction: "prepend" // or "append", the stack direction
}

Documentation

More Bootstrap extensions

Check out my further Bootstrap extensions

You might also like...

Thin wrapper around Rant-Lang for Obsidian.md

Thin wrapper around Rant-Lang for Obsidian.md

Obsidian Rant-Lang Thin wrapper around the Rant language Rust crate to be used in Obsidian. "Rant is a high-level procedural templating language with

Jul 12, 2022

A thin wrapper around arweave-js for versioned permaweb document management.

๐ŸŽ ar-wrapper A thin wrapper around arweave-js for versioned permaweb document management. Helps to abstract away complexity for document storage for

May 12, 2022

A simple nodejs module which is wrapper around solc that allows you to compile Solidity code

A simple nodejs module which is wrapper around solc that allows you to compile Solidity code

Simple Solidity Compiler It's a simple nodejs module which is wrapper around solc that allows you to compile Solidity code and get the abi and bytecod

Feb 21, 2022

A nuxt 2 wrapper around derrickreimer/fathom-client to be able to use usefathom.com in all its glory

A nuxt 2 wrapper around derrickreimer/fathom-client to be able to use usefathom.com in all its glory

This package is a nuxt 2 wrapper around derrickreimer/fathom-client to be able to use usefathom.com in all its glory. Thanks to @derrickreimer for this framework agnostic library โค๏ธโ€๐Ÿ”ฅ.

Aug 18, 2022

A maybe slightly safer-ish wrapper around eval Function constructors

evalish A maybe slightly safer-ish wrapper around eval Function constructors Please maybe try something else first.. Please. evalish is a small helper

Sep 6, 2022

A wrapper around IPFS for speeding up the loading of web3 frontend applications.

ipfs-wrapper A wrapper around ipfs-core for speeding up the loading of web3 frontend applications. Used on Blogchain. Requirements NodeJS v14.5.0 or h

Sep 14, 2022

A maybe slightly safer-ish wrapper around eval Function constructors

evalish A maybe slightly safer-ish wrapper around eval Function constructors Please maybe try something else first.. Please. evalish is a small helper

Aug 21, 2022

An even simpler wrapper around native Fetch to strip boilerplate from your fetching code!

An even simpler wrapper around native Fetch to strip boilerplate from your fetching code!

Super lightweight (~450 bytes) wrapper to simplify native fetch calls using any HTTP method (existing or imagined). Features Fully typed/TypeScript su

Dec 28, 2022

โšกโš™๏ธ Fast prototyping with template engines and integrated frontend tools. Vituum is a small wrapper around Vite.

โšกโš™๏ธ Fast prototyping with template engines and integrated frontend tools. Vituum is a small wrapper around Vite.

โšก โš™๏ธ Vituum Still in early development. Fast prototyping with template engines and integrated frontend tools โšก Vite integrated ๐Ÿš€๏ธ Fast prototyping ๐Ÿ› 

Jan 3, 2023
Comments
  • Bump glob-parent from 5.1.1 to 5.1.2

    Bump glob-parent from 5.1.1 to 5.1.2

    Bumps glob-parent from 5.1.1 to 5.1.2.

    Release notes

    Sourced from glob-parent's releases.

    v5.1.2

    Bug Fixes

    Changelog

    Sourced from glob-parent's changelog.

    5.1.2 (2021-03-06)

    Bug Fixes

    6.0.2 (2021-09-29)

    Bug Fixes

    6.0.1 (2021-07-20)

    Bug Fixes

    • Resolve ReDoS vulnerability from CVE-2021-35065 (#49) (3e9f04a)

    6.0.0 (2021-05-03)

    โš  BREAKING CHANGES

    • Correct mishandled escaped path separators (#34)
    • upgrade scaffold, dropping node <10 support

    Bug Fixes

    • Correct mishandled escaped path separators (#34) (32f6d52), closes #32

    Miscellaneous Chores

    • upgrade scaffold, dropping node <10 support (e83d0c5)
    Commits

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    opened by dependabot[bot] 1
Owner
Stefan Haack
My code is your code
Stefan Haack
Robust, plug & play generator for Bootstrap toasts.

Bootstrap Toaster Robust, plug & play generator for Bootstrap toasts. Supports Bootstrap 4 and Bootstrap 5. Demo A demo page is available at bootstrap

Peyton Gasink 22 Dec 21, 2022
Makes Bootstrap 5.x Toasts easier to use

bootstrap5-toast Copied from https://github.com/Script47/Toast and updated to support Bootstrap 5.x https://getbootstrap.com/docs/5.0/components/toast

Chris Go 7 Jul 12, 2022
Extends Bootstrap Tooltips and Popovers by adding custom classes. Available for Bootstrap 3 and Bootstrap 4.

Bootstrap Tooltip Custom Class Extends Bootstrap Tooltips and Popovers by adding custom classes. Available for Bootstrap 3 and Bootstrap 4. Define you

Andrei Victor Bulearca 14 Feb 10, 2022
A simple Form Validation Utility for Bootstrap 3, Bootstrap 4, and Bootstrap 5 for Humans.

bootstrap-validate A simple Form Validation Utility for Bootstrap 3, Bootstrap 4, and Bootstrap 5 for Humans. ?? Support us with Developer Merchandise

null 138 Jan 2, 2023
A handy wrapper for the Web Notifications API

Notify.js A handy wrapper for using the Web Notifications API. Notify.js aims to simplify requesting user permission and associated Web Notification A

Alex Gibson 1.3k Dec 4, 2022
Front-end for FireNearby service. View recent fires and sign up to receive alerts: caseymm.github.io/fire-nearby

fire-nearby (firenearby service front-end) This application is composed of three pages: Map of recent fires Sign up form to receive alerts About this

Casey Miller 4 Mar 30, 2022
TikTokLive-Widget: A socket client/server program that exposes a widget with alerts (such as gifts, followers ...) for a specific user streaming on Tik Tok Live platform

TikTokLive-Widget: A socket client/server program that exposes a widget with alerts (such as gifts, followers ...) for a specific user streaming on Tik Tok Live platform

null 3 Dec 3, 2022
๐Ÿ“ฃ A vanilla js library for creating alerts, prompts and confirms.

attention.js This library will be released soon as 1.0 with a whole new codebase! Stay tuned! A vanilla js library for creating alerts, prompts, and c

Jan-Markus Langer 13 Apr 21, 2022
A beautiful, responsive, highly customizable and accessible replacement for JavaScript's popup boxes. Zero dependencies.Alerts ,dialogs

AsgarAlert (v1) for JS Install <script defer src="/asgar-alert.js"></script> Examples The most basic message: asgar("Hello world!"); A message signali

Asgar Aliyev 5 Dec 20, 2022
Bootstrap Colorpicker is a modular color picker plugin for Bootstrap.

Bootstrap Colorpicker Bootstrap Colorpicker is a modular color picker plugin for Bootstrap 4. THIS PROJECT IS NOT MAINTAINED ANYMORE. After almost 10

Javi Aguilar 1.4k Dec 22, 2022