Customizable Dialog Boxes Using jQuery And Bootstrap - BootPopup

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

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,
  content: [],
  buttons: ["close"],
  dismiss: function(data) {},
  close: function(data) {},
  ok: function(data) {},
  cancel: function(data) {},
  yes: function(data) {},
  no: function(data) {},
  complete: function(data) {},

Change logs:


  • 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.