Versatile Dialog Popup Plugin With jQuery And Bootstrap - simpleDialog

simpleDialog is a jQuery plugin to create responsive, customizable alert, confirmation dialog popups with Bootstrap modal components. Compatible with both Bootstrap 3 and Bootstrap 4.

1. The plugin requires jQuery library and Bootstrap loaded properly in the document.

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

2. Download and load the simpleDialog plugin's script after jQuery.

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

3. Create a basic alert dialog.

$.simpleDialog({
  title:"Alert Dialog",
  message:"Alert Message"
});

4. Create a confirmation dialog with confirm and cancel callbacks.

$.simpleDialog({
  title:"Alert Dialog",
  message:"Alert Message",
  onSuccess:function(){
    alert("You confirmed");
  },
  onCancel:function(){
    alert("You cancelled");
  }
});

5. Create a dialog popup from html strings.

var myHtml = '<div class="modal-header bg-white">'+
            '   <h4 class="modal-title capitalize-first-letter" id="modalHeader">Confirm Dialog</h4>'+
            '</div>'+
            '<div class="modal-body">'+
            '   <div class="row">'+
            '     <div class="col-md-12">Are You Sure?</div>'+
            '   </div>'+
            '</div>';
$.simpleDialog({
  modalContent: myHtml
});

6. Customize the text of your confirm and cancel buttons.

$.simpleDialog({
  title:"Alert Dialog",
  message:"Alert Message",
  confirmBtnText: 'Confirm',
  closeBtnText: 'Cancel',
  onSuccess:function(){
    alert("You confirmed");
  },
  onCancel:function(){
    alert("You cancelled");
  }
});

7. Decide whether to show the background overlay.

$.simpleDialog({
  backdrop: true
});

8. Config the close button which allows you to close the dialog manually.

$.simpleDialog({
  closeButton: true,
  closeButtonTemplate: '<button type="button" id ="cancel-btn" class="btn btn-default">{closeBtnText}</button>',
});

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