
Yet another Bootstrap 4 modal wrapper plugin which lets you create beautiful, responsive, dynamic alert/confirm dialog boxes and complex modal windows using Bootstrap 4 modal component.
1. To use the plugin start with loading the latest jQuery library and Bootstrap 4 framework in the document.
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous"> <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
2. Load the JavaScript bootstrap-show-modal.js
after jQuery library and we're ready to go.
<script src="src/bootstrap-show-modal.js"></script>
3. The JavaScript to create an alert popup with an OK button.
$.showAlert({ title: "Alert Popup", body: "This is an alert popup" })
4. The JavaScript to create a basic modal window.
$.showModal({ title: "Modal Window", body: "This is a basic modal window" })
5. The JavaScript to create a confirmation dialog with confirm/cancel actions.
$.showConfirm({ title: "Confirm Dialog", body: "Are You Sure", textTrue: "Okey", textFalse: "Cancel", confirmed: function (result) { if (result) { // do something } else { // do something } }, hidden: function () { // do something } })
6. All default options.
{ // modal title title: "", // modal body body: "", // modal footer footer: "", // called after created created: null, // called after hidden hidden: null, // called after confirmed // $.showConfirm only confirmed: null, // additional CSS class(es) modalClass: "", // additional CSS class(es) for ".modal-dialog" modalDialogClass: "", // Bootstrap 4 modal's options options: null }
This awesome jQuery plugin is developed by shaack. For more Advanced Usages, please check the demo page or visit the official website.
- Publication date: 02.08.2018
- Source