Customizable Dialog Boxes Using jQuery And Bootstrap - BootPopup

File Size: 44.5 KB
Views Total: 5053
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
Customizable Dialog Boxes Using jQuery And Bootstrap - BootPopup

BootPopup is a lightweight jQuery plugin which utilizes Bootstrap's modal component to create highly customizable alert, confirm and prompt dialog boxes in the webpage.

How to use it:

1. To use this plugin, you first need to include jQuery JavaScript library and Bootstrap framework in the page.

<link rel="stylesheet" href="bootstrap.min.css">
<script src="jquery.min.js"></script>
<script src="bootstrap.min.js"></script>

2. Include the JavaScript file bootpopup.js after jQuery library.

<script src="bootpopup.js"></script>

3. Create a custom alert dialog:

// bootpopup.alert(message, title, callback)
bootpopup.alert("This is a simple alert message!","This is a title");

4. Create a custom confirm dialog with a callback function:

// bootpopup.confirm(message, title, callback)
bootpopup.confirm("Are you sure?", "Confirm Title", function(ans) { bootpopup.alert(ans); });

5. Create a prompt dialog.

// bootpopup.prompt(label, inputType, message, title, callback)
bootpopup.prompt("Age", "number");

6. All default configuration options and callback functions.

  title: document.title,
  showclose: true,
  size: "normal",
  size_labels: "col-sm-4",
  size_inputs: "col-sm-8",
  content: [],
  onsubmit: "close",
  buttons: ["close"],
  before: function() {},
  dismiss: function(data) {},
  close: function(data) {},
  ok: function(data) {},
  cancel: function(data) {},
  yes: function(data) {},
  no: function(data) {},
  complete: function(data) {},
  submit: function(e) {
    self.callback(self.options.onsubmit, e);
    return false; // Cancel form submision



  • v1.5.5: Bugfixes


  • v1.5.1: Update API with selects and radios


  • Support raw html input for bootpopup.prompt


  • v1.4.4


  • Parameter passed to before callback is the bootpopup instance


  • Property for options


  • v1.3.0: Fix: add window to body.


  • Support multiple values in prompt


  • Added AMD support.


  • Support for checkboxes


  • Cancel form submission when Enter is pressed


  • Transform data from the form as key-value pair

This awesome jQuery plugin is developed by rigon. For more Advanced Usages, please check the demo page or visit the official website.