Bootstrap 4 dialogs

Quick start

BSD requires jQuery v1.9.1+, Bootstrap 4 modal component, and Bootstrap's CSS.

Several quick start options are available:

  • Download the latest release: https://github.com/bgaze/bootstrap4-dialogs/releases
  • Clone the repo: git clone https://github.com/bgaze/bootstrap4-dialogs.git
  • Install with npm: npm install TODO
  • Install with yarn: yarn add TODO
  • Install with Composer: composer require bgaze/bootstrap4-dialogs
  • Install with Bower: bower install TODO
  • Install via CDN: TODO

Just make sure to include required dependencies into your app, then the library script bootstrap4-dialogs.min.js.
That's it! You can use the globally declared bsd object :

"./src/doc/demo.html"

HTML

"!./src/doc/demo.html"

Javascript

"!./src/doc/demo.js"

Usage

This section applies to all provided dialog functions (bsd.alert, bsd.confirm, bsd.prompt).

When called, a customized Boostrap 4 modal will be dynamically built and inserted into the document.
Unless explicitly specified through options, the modal is automatically shown when created, and destroyed then removed from the DOM when closed.

There is no stylesheet provided with BSD, as it rely on Bootstrap styles.
To ease dialogs theming, two CSS classes are automatically added to each dialog : bsd-dialog and bsd-[dialogName] (for instance bsd-alert for alert dialogs).

Arguments

Dialog functions accept two arguments:

  • title: the html to insert into the dialog popup title.
    If undefined, the title element will be removed from the modal.
  • options: an optional set of options. If a function is provided, it will be used as dialog callback.
    All available options can be customized / overrided globally, see options sections for details. 
"!./src/doc/usage-arguments.js"

Handling dialogs

Each dialog function returns it's modal element as a jQuery object, so Bootstrap modal events and method can be directly used. 

"!./src/doc/usage-handling.js"

Options

BSD defaults options are stored into the bsd.defaults object and organized this way:

  • bsd.defaults.dialog: common options that apply to all dialogs.
  • bsd.defaults.[dialogName]: options that apply to a specific dialog only.

You can easily make application wide customizations: 

"!./src/doc/options.js"

Here is the list of available common options: 

"!./src/dialogs/common-defaults.js"

Alert

Usage :

When using a callback function, it will receive as argument the original "modal dismiss" event. 

"!./src/doc/alert.js"

Default options :

You can customize these options as described in the options section. 

"!./src/dialogs/alert-defaults.js"

Default template :

If you need to change this template, just make sure to keep required bsd-* classes. 

"!./src/dialogs/alert.html"

Confirm

Usage :

The callback function will receive two arguments:

  1. The confirmed status as a boolean.
  2. The original event that raised the callback.

It must return a boolean indicating if the dialog should be closed. 

"!./src/doc/confirm.js"

Default options :

You can customize these options as described in the options section. 

"!./src/dialogs/confirm-defaults.js"

Default template :

If you need to change this template, just make sure to keep required bsd-* classes. 

"!./src/dialogs/confirm.html"

Prompt

Usage :

The callback function will receive two arguments:

  1. The prompt field value, or null if canceled.
  2. The original event that raised the callback.

It must return a boolean indicating if the dialog should be closed. 

"!./src/doc/prompt.js"

Default options :

You can customize these options as described in the options section. 

"!./src/dialogs/prompt-defaults.js"

Default template :

If you need to change this template, just make sure to keep required bsd-* classes. 

"!./src/dialogs/prompt.html"

Extend BSD

If you need to create custom dialogs, you can easily extend BSD.
Please find below a detailed example.

Define your dialog options and defaults.

Simply append them to bsd.defaults. The key MUST be your dialog name.
Remember that your dialog options inherit from bsd.defaults.dialog, so you can override them.

The only required option that must be provided is the dialog template (template key). 

"!./src/doc/custom-defaults.js"

Create the dialog function.

You can easily generate the dialog thanks to the bsd.dialog function wich :

  1. Prepares the dialog settings by merging provided options, dialog defaults and common defaults.
  2. Generates the dialog HTML and insert it into the DOM.
  3. Initializes Bootstrap 4 Modal based on settings, keeping it hidden.
  4. Manages the dialog removal on hidden.bs.modal event based on destroy option.
  5. Manages the show.bs.modal event based on show option.
  6. Customizes the dialog using a provided function.
  7. Manages the dialog opening based on show option.
  8. Returns the dialog jQuery object.

It requires three arguments :

  1. The dialog defaults key name into bsd.defaults.
  2. The option set provided by the user.
  3. A function to customize the dialog. When called, it will receive as arguments the dialog jQuery object and the merged settings.
"!./src/doc/custom-function.js"

Usage:

Simply use your function like this: 

"!./src/doc/custom-usage.js"