JSPM

  • Created
  • Published
  • Downloads 6505
  • Score
    100M100P100Q82696F
  • License MIT

jQuery plugin to create bootstrap 4 modals in pure JavaScript

Package Exports

  • bootstrap-show-modal

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (bootstrap-show-modal) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

bootstrap-modal-dialog

jQuery plugin to create bootstrap 4 modals in pure JavaScript.

Demo Page

Usage

Simple

$.showModal({title: "Hello World!", body: "A very simple modal dialog without buttons."})

Alert with fade effect

$.showAlert({modalClass: "fade", title: "Hi", body: "Please press ok, if you like or dislike cookies."})

Confirm

$.showConfirm({
    title: "Please confirm", body: "Do you like cats?", textTrue: "Yes", textFalse: "No",
    confirmed: function (result) { // callback on confirm
        if (result) {
            $.showAlert({title: "Result: " + result, body: "You like cats."})
        } else {
            $.showAlert({title: "Result: " + result, body: "You don't like cats."})
        }
    },
    hidden: function() { // callback on hide
        console.log("The dialog was hidden.")
    }
})

Properties

props = {
    title: "", // the dialog title html
    body: "", // the dialog body html
    footer: "", // the dialog footer html (mainly used for buttons)
    created: null, // callback, called after the modal is created
    hidden: null, // callback, called after the modal is hidden 
    confirmed: null, // $.showConfirm only. callback, called after yes or no was pressed
    modalClass: "", // Additional css for ".modal", like "fade" for fade effect
    modalDialogClass: "", // Additional css for ".modal-dialog", like "modal-lg" or "modal-sm" for sizing
    options: null // The Bootstrap modal options as described here: https://getbootstrap.com/docs/4.0/components/modal/#options
}

Also see the Bootstra 4 Modal documentation.