Dynamic Bootstrap Modal Creator - jQuery modalup

Dynamic Bootstrap Modal Creator - jQuery modalup

modalup is an easy and convenient Bootstrap modal creation plugin which dynamically generates custom Bootstrap modals and dialogs without writing any HTML.

1. To use this plugin, make sure the jQuery library and Bootstrap framework are loaded in the html page.

<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ" crossorigin="anonymous"></script>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

2. Load the jQuery modalup's JavaScript and CSS files in the page.

<link href="css/bootstrap-modal-creator.css" rel="stylesheet">
<script src="js/bootstrap-modal-creator.js"></script>

3. Create a new modal and pass the modal options to the createBootstrapModal function:

var myModal = createBootstrapModal(
{
  id:"lastest_modal",
  modalSize : "modal-sm",
  headerCancelButton: true,
  FooterCancelButton: true,
  ConfirmButton: true,
  ConfirmButtonFunc: function(){alert("Confirm Button")},
  ConfirmButtonText: "Confirm Button Text",
  ConfirmButtonClass: "btn-info",
  titlePrefix: "Title - Prefix",
  titlePostfix: "Postfix",
  closeOnConfirm: false,
  clearModal: false,
  closeByEscKey: true,
  closeByCodeOnly: true,
  onOpen : function(){alert("On Open Function")},
  onClose : function(){alert("On Close Function")},
});

4. Initialize the Bootstrap modal.

myModal.born();

5. Set modal title & body.

myModal.setTitle("Title Here");
myModal.setBody("<b>Please Confirm your modificaiton</b><p>Sometext goes here...</p>");

6. Launch the Bootstrap modal when needed.

myModal.open();

7. Close the Bootstrap modal manually.

myModal.close();

8. All default options and callback functions for the Bootstrap modal.

id:"" (Require),
modalSize : "modal-sm" / "modal-lg" or leave it empty for medium size,
headerCancelButton: true / false (optional),
FooterCancelButton: true / false  (optional),
ConfirmButton: true / false  (optional),
ConfirmButtonFunc: function(){}  (optional),
ConfirmButtonText: ""  (optional),
ConfirmButtonClass: e.g. "btn-info"  (optional),
footerCloseButtonText: default "close",
titlePrefix: "" / null  (optional),
titlePostfix: "" / null  (optional),
clearModal: true / false,
closeOnConfirm: true / false,
closeByEscKey: true / false, // close the modal when the user press the Esc on keyboard
closeByCodeOnly: true / false, // modal can't be closed when the user click anywhere on the screen  it must be dismissed by a code / close button
onOpen : function(){}
onClose : function(){}

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

  • Publication date: 25.01.2018
  • Source