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

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

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

  • Publication date: 19.05.2018
  • Source