Custom Dialog Popup jQuery Plugin For Bootstrap - Bootstrap-popup

Bootstrap-popup is a jQuery plugin to enhance the default javascript popup boxes that helps you create custom toast, confirmation, prompt dialog boxes using Bootstrap modal component.

How to use it:

1. Load the JavaScript file bootstrap-popup.min.js into your webpage which has jQuery and Bootstrap installed.

<script src="jquery.min.js"></script>
<script src="bootstrap.min.js"></script>
<script src="dist/bootstrap-popup.min.js"></script>

2. Create a toast message that auto disappears after 3 seconds.

$.bs.popup.toast({
  title: 'Title',
  info: 'This is a toast.'
}, function(dialogE) {
  var modalBody = dialogE.find('.modal-body');
  modalBody.append('<p class="countdown"></p>');
  var cd = modalBody.find('.countdown'),
      i = 3;
  cd.html('It would be disappeared in ' + i + 's by default.');
  setInterval(function() {
      i -= 1;
      cd.html('It would be disappeared in ' + i + 's by default.');
  }, 1000);
});

3. Create a confirmation dialog.

$.bs.popup.confirm({
  title: 'Title',
  info: 'Do you want confirm?'
}, function(dialogE) {
  alert('You are confirmed.');
  dialogE.modal('hide');
});

4. Create a prompt dialog.

$.bs.popup.prompt({
  title: 'Title',
  info: 'Input your name, please.'
}, function(dialogE, message) {
  // nested toast
  $.bs.popup.toast({
      title: 'Title',
      info: 'You are input: ' + message
  }, function() {
      dialogE.modal('hide');
  });
});

5. Create a custom dialog popup.

$.bs.popup.custom({
  title: 'Title',
  dom: '<div class="custom"><h1>This is a custom DOM.</h1></div>',
  width: '200px'
});

Change log:

2016-07-22

• Popup default being set no fade animation

---

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