JSPM

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

bootstrap plugin to create modals in pure JavaScript, without jQuery

Package Exports

    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-show-modal

    bootstrap plugin to create bootstrap modals in pure JavaScript.

    Demo Page

    This version is compatible with Bootstrap 5, but we remain a Bootstrap 4 compatible version with the branch bootstrap4-compatible. npm package versions 3.x are Bootstrap 5 compatible, versions 1.x Bootstrap 4 compatible.

    With version 5.x of bootstrap-shop-modal we completely removed jQuery 🥳 🚀

    Installation

    npm install bootstrap-show-modal

    Or just download this repository and include src/bootstrap-show-modal.js.

    Usage

    Simple Modal

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

    Alert Dialog

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

    Confirm Dialog

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

    Properties

    this.props = {
        title: "", // the dialog title html
        body: "", // the dialog body html
        footer: "", // the dialog footer html (mainly used for buttons)
        modalClass: "fade", // Additional css for ".modal", "fade" for fade effect
        modalDialogClass: "", // Additional css for ".modal-dialog", like "modal-lg" or "modal-sm" for sizing
        options: { // The Bootstrap modal options as described here: https://getbootstrap.com/docs/4.0/components/modal/#options
            backdrop: 'static' // disallow closing on click in the background
        },
        draggable: false, // make the dialog draggable 🆕
        // Events:
        onCreate: null, // Callback, called after the modal was created
        onShown: null, // Callback, called after the modal was shown and completely faded in
        onDispose: null, // Callback, called after the modal was disposed
        onSubmit: null // Callback of bootstrap.showConfirm(), called after yes or no was pressed
    }

    See the Bootstrap 4 Modal documentation for possible values of options, modalClass and modalDialogClass.

    Minified version

    I don't provide a minified version because I think it should be up to the using programmer to create minified versions, with all the used script sources concatenated to one file.

    But, if you want it, it is easy to create your minified version with uglify: https://www.npmjs.com/package/uglify-js

    Just install uglify

    npm install uglify-js -g

    and then in the src-folder

    uglifyjs bootstrap-show-modal.js --compress --mangle > bootstrap-show-modal.min.js

    Browser support

    It works in all modern browsers and in the Internet Explorer. Not tested with IE < 11.

    You may want to check out my further Bootstrap and HTML extensions