BootPopup

Popup dialog boxes for Bootstrap.

See it in action in BootPopup - Examples

Content

• API
  • bootpopup.alert
  • bootpopup.confirm
  • bootpopup.prompt (single value)
  • bootpopup.prompt (multiple values)
  • bootpopup
    • About the buttons option
    • About the content option
  • bootpopup object
    • Properties
    • Methods
    • DOM Elements
• Build
• Test locally
• Examples
• Migration from previous version to v1

API

bootpopup.alert(message[, title[, callback]])

Shows an alert dialog box. Return: instance of BootPopup window

• message:
  • (string) message of the alert
• title:
  • (string) title of the alert. Default value is page title
  • (function)() callback when the alert is dismissed
• callback:
  • (function)() callback when the alert is dismissed

bootpopup.confirm(message[, title[, callback]])

Shows a confirm dialog box. Return: instance of BootPopup window

• message:
  • (string) message to confirm
• title:
  • (string) title of the confirm dialog. Default value is page title
  • (function)(answer) callback when the confirm is answered. answer will be true if the answer was yes and false if it was no. If dismissed, the default answer is no
• callback:
  • (function)(answer) callback when the confirm is answered. answer will be true if the answer was yes and false if it was no. If dismissed, the default answer is no

bootpopup.prompt(label[, type[, message[, title[, callback]]]])

Shows a prompt dialog box, asking to input a single value. Return: instance of BootPopup window

• label:
  • (string) label of the value being asked
• type:
  • (string) type of the value being asked. This corresponds to the HTML input types. Default value is text
  • (function)(answer) callback with the introduced data. This is only called when OK is pressed
• message:
  • (string) message shown before the asked value. Default value is Provide a type for:
  • (function)(answer) callback with the introduced data. This is only called when OK is pressed
• title:
  • (string) title of the prompt dialog. Default value is page title
  • (function)(answer) callback with the introduced data. This is only called when OK is pressed
• callback:
  • (function)(answer) callback with the introduced data. This is only called when OK is pressed

bootpopup.prompt(list_types[, message[, title[, callback]]])

Shows a prompt dialog box, asking to input multiple values. Return: instance of BootPopup window

• list_types:
  • (array) array of objects with the description of values being asked:
    • label label of the value
    • type type of the value (default is text)
    • name key used in the data returned to the callback (default is label in lowercase and dashed)
    • HTML input attributes are also accepted. Example: { label: "Name", type: "text", name: "name", value: "My name"}
• message:
  • (string) message shown before the asked value. Default value is Provide a type for:
  • (function)(answer) callback with the introduced data. This is only called when OK is pressed
• title:
  • (string) title of the prompt dialog. Default value is page title
  • (function)(answer) callback with the introduced data. This is only called when OK is pressed
• callback:
  • (function)(answer) callback with the introduced data. This is only called when OK is pressed

bootpopup(options)

Shows a customized dialog box. bootpopup.alert, bootpopup.confirm and bootpopup.prompt are mapped into this function. Return: instance of BootPopup window

Options: (object)

About the buttons option:

If buttons is not specified, BootPopup will automatically select the buttons based on the defined callbacks. If some of the callbacks close, ok, cancel, yes, no are defined, the respective buttons are selected.

For example, if you define ok and cancel callbacks, the option buttons is automatically configured to ["ok", "cancel"].

About the content option:

The biggest flexibility of BootPopup is the content option. The content is wrapped by a form and has the bootstrap class .form-horizontal allowing to create complex forms very quickly. When you are submitting data via a dialog box, BootPopup will grab all that data and deliver to you through the callbacks.

1. content is an array of objects and each object is represented as an entry of the form. For example, if you have the following object:

   { p: {class: "bold", text: "Insert data:"}}

   This will add a <p></p> tag to the form. The options of p ({class: "bold", text: "Insert data:"}) are HTML attributes passed to the HTML tag. There is a special attribute for text which is defined as the inner text of the HTML tag. So, this example is equivalent to the following HTML:

   <p class="bold">Insert data:</p>

2. But it is when it comes to adding inputs that things become easy. Look at this example:

   { input: {type: "text", label: "Title", name: "title", placeholder: "Description" }}

   This will create an input element with the attributes type: "text", label: "Title", name: "title", placeholder: "Description". Note there is also a special attribute label. This attribute is used by BootPopup to create a label for the input form entry. The above example is equivalent to the following HTML:

   <div class="form-group">
     <label for="title" class="col-sm-2 control-label">Title</label>
     <div class="col-sm-10">
       <input label="Title" name="title" id="bootpopup-form-input" placeholder="Description" class="form-control" type="text">
     </div>
   </div>

3. In order to make it even simpler, there are shortcuts for most common input types (button, text, submit, color, url, password, hidden, file, number, email, reset, date, select, radio). The previous example can be simply written as:

   { text: {label: "Title", name: "title", placeholder: "Description" }}

   NOTE: select and radio have a special attribute named options. You can specify a list of options to be shown (the key is used as value by the input and the value is the text displayed):

   { select: { label: "Select", name: "select", options: { a:"A", b:"B", c:"C" }}}

   select with attribute multiple is also supported.

4. Another useful feature is the ability to support functions directly as an attribute. Take the following button example:

   { button: {name: "button", value: "Open image", class: "btn btn-info", onclick: function(obj) {
       console.log(obj);
       bootpopup.alert("Hi there");
   }}}

   This will create a onclick event for the button. The reference for the object is passed as argument to the function.

5. You can also insert HTML strings directly. Instead of writing an JS object, write the HTML:

   '<p class="lead">Popup dialog boxes for Bootstrap.</p>'

bootpopup object

The bootpopup object is returned every time a new instance of BootPopup is created.

Properties

• formid - HTML ID of the form, this is a randomly generated
• options - list of options used to create the window

Methods

• addOptions - add options to the current options
• setOptions - override the current options, a list with all options is required
• create - create the window and add it to DOM, but not show
• show - show window and call before callback
• dismiss - performs a dismiss
• submit - performs a submit
• close - performs a close
• ok - performs a ok
• cancel - performs a cancel
• yes - performs a yes
• no - performs a no

DOM elements

All the following BootPopup properties are jQuery objects:

• modal - entire window, including the fade background. You can use this property in the same way as described in Bootstrap Modals Usage
• dialog - entire window, without the background
• content - content of the dialog
• header - header of the dialog
• body - body of the dialog
• form - main form in the dialog, inside the body
• footer - footer of the dialog
• btnClose - close button (if present)
• btnOk - OK button (if present)
• btnCancel - cancel button (if present)
• btnYes - yes button (if present)
• btnNo - no button (if present)

Build

In order to build a version for distribution, please run:

npm install
npm run dist

The output file is bootpopup.min.js

Test locally

Please run:

npm install
npm start

Now, you can open http://localhost:9080/

Examples

Open index.html to see the library in action.

• Alert:

  bootpopup.alert("Hi there");

• Confirm:

  bootpopup.confirm("Do you confirm this message?", function(ans) {
    alert(ans);
  });

• Prompt:

  bootpopup.prompt("Name", function(value) {
    alert(value);
  });

• Customized prompt:

  bootpopup({
      title: "Add image",
      content: [
          '<p class="lead">Add an image</p>',
          { p: {text: "Insert image info here:"}},
          { input: {type: "text", label: "Title", name: "title", placeholder: "Description for image"}},
          { input: {type: "text", label: "Link", name: "link", placeholder: "Hyperlink for image"}}],
      cancel: function(data) { alert("Cancel"); },
      ok: function(data,e) { console.log(data,e); },
      complete: function() { alert("complete"); },
  });

Migration from previous version to v1

• The value passed in the argument to the prompt callback is now the actual value
• The parameters passed to the callback of bootpopup are now:
  1. data - a list of key-value pairs of the form, where key is the name of the input
  2. array - an array of name-value pairs obtained from the jQuery function $(form).serializeArray()
  3. event - event of pressing the button