Extend Bootstrap 4 Modal With Extra Features - jQuery modal-js

modal-js is a simple and robust jQuery plugin for creating responsive, flexible, mobile-friendly modals, dialogs, popups using Bootstrap 4 modal component.

Features:

• Compatible with both mobile and desktop.
• 7 modal themes.
• Supports iframe content.
• Fullscreen/minimize modes.
• Multiple instances on a page.
• Callback functions for confirmation dialogs.

How to use it:

1. To use this plugin, you need to load the jQuery library and Bootstrap 4 framework in the document.

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" 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.0/umd/popper.min.js" integrity="sha384-cs/chFZiN24E4KMATLdqdvsezGxaGsi4hLGOzlXwp5UZB1LY//20VyM2taTB4QvJ" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js" integrity="sha384-uefMccjFJAIv6A+rW+L4AHf99KvxDjWSu1z9VI8SKNVmz4sk7buKt/6v9KI65qnm" crossorigin="anonymous"></script>

2. Load the jQuery modal-js plugin at the end of the document.

<!-- for desktop -->
<script src="dist/js/pcmodal.js"></script>

<!-- for mobile -->
<script src="dist/js/modal.js"></script>

3. Create & display a basic modal window on the screen.

showmodal({
  content: "Basic Modal"
});

4. Change the default theme. Available themes:

• info (Default)
• primary
• secondary
• success
• danger
• warning
• info
• dark

showmodal({
  content: "Basic Modal",
  flag: "info"
});

5. Embed an iframe into the modal window.

showmodal({
  isText: false,
  src: "iframe.html"
});

6. All default options and callback functions for the modal plugin.

// desktop version
showmodal({

  // primary, secondary, success
  // danger, warning, info, dark
  flag: "info", 

  // modal title
  title: "Modal Title",

  // modal index
  modalIndex: "01",

  // center the modal title
  titleCenter: false,

  // is text content?
  isText: true, 

  // modal content
  content: "Modal Content",

  // sets the content alignment
  contentLeft: false, 

  // font size
  fontSize: "", 

  // iframe src
  src: "",

  // parameters for iframe
  data: {}, 

  // closes the modal by clicing the background overlay
  // set to 'static' to disable
  hideClick: true,

  // shows top close button
  Tclose: true,

  // shows bottom buttons
  Bclose: true,
  Qclose: false,

  // sets the size of the modal window
  Sheight: "",
  SMaxheight: "",
  SWidth: "", 
  SMaxWidth: "", 

  // re-position the modal to make it always be center
  resetajust: false,

  // callback for confirm button
  callbackB: false,

  // callback for cancel button
  callbackQ: false,

  // text for confirm button
  BcloseText: "Okey",

  // text for cancel button
  QcloseText: "Cancel", 

  // justify bottom buttons
  Justify: false,

  // shows fullscreen button
  isZoom: false,

  // sets the padding of the iframe modal
  iframePadding: false,

  // compatible with IE9?
  isIE9: false

});

// mobile version
showmodal({

  // is text content?
  isText: true, 

  // modal content
  content: "Modal Content",

  // sets the content alignment
  contentLeft: false, 

  // font size
  fontSize: "", 

  // iframe src
  src: "",

  // closes the modal by clicing the background overlay
  // set to 'static' to disable
  hideClick: true,

  // shows bottom buttons
  Bclose: true,
  Qclose: false,

  // sets the size of the modal window
  Sheight: "",
  SWidth: "", 

  // callback for confirm button
  callbackB: false,

  // callback for cancel button
  callbackQ: false,

  // text for confirm button
  BcloseText: "Okey",

  // text for cancel button
  QcloseText: "Cancel", 

  // justify bottom buttons
  Justify: true,

  // sets the padding of the iframe modal
  iframePadding: false,

});

Changelog:

2018-05-23

• JS update

---

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