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.

Features

• Content from html elements or string
• Backdrop enable and disable (optional)
• Buttons show/hide options (optional)
• Callback functions for success/confirm operations (optional)
• Working with bootstrap
• Responsive UI

Prerequisites

• Bootstrap CSS
• Bootstrap JS
• jQuery

Installing

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

<script type="text/javascript" src="/simpleDialog.js"></script>

Usage

Example: https://codepen.io/iamjithz/live/eymqmL

Example : https://www.jqueryscript.net/lightbox/Dialog-Plugin-jQuery-Bootstrap-simpleDialog.html

Basic Usage

<script type="text/javascript" src="/simpleDialog.js"></script> <script type="text/javascript> $.simpleDialog(); </script> 

Custom title and message

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

simpleDialog with callback

<script type="text/javascript" src="/simpleDialog.js"></script> <script type="text/javascript> $.simpleDialog({     onSuccess:function(){         alert("You confirmed");     },     onCancel:function(){         alert("You cancelled");     } }); </script> 

simpleDialog with options and callback

<script type="text/javascript" src="/simpleDialog.js"></script> <script type="text/javascript">   $.simpleDialog({     title:"Confirm",     message:"Do you want to continue?",     confirmBtnText: "Yes! I'm Sure",     closeBtnText: "Cancel",     backdrop:true,     onSuccess:function(){       alert("You confirmed");     },     onCancel:function(){       alert("you cancelled");     }   }); </script> 

simpleDialog with html strings

<script type="text/javascript" src="/simpleDialog.js"></script> <script type="text/javascript"> var html = '<div class="modal-header bg-white">'+             '   <h4 class="modal-title capitalize-first-letter" id="modalHeader">Confirm</h4>'+             '</div>'+             '<div class="modal-body">'+             '   <div class="row">'+             '     <div class="col-md-12">Do you want to continue?</div>'+             '   </div>'+             '</div>';   $.simpleDialog({     modalContent: html,     closeBtnText: "Cancel",     backdrop:true,     onSuccess:function(){       alert("You confirmed");     }   }); </script> 

You can pass either modal content or title and message.

Customize the text of 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");   } });  

Decide whether to show the background overlay

$.simpleDialog({   backdrop: true }); 

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>', }); 

Remove close button from modal

$.simpleDialog({   closeButton: false, });  

Built With

• jQuery
• Bootstrap

License

This project is licensed under the MIT License

Acknowledgments

• bootstrap modal