
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.
- Publication date: 17.12.2017
- Source