Extend Bootstrap 4 Modal With Extra Features - jQuery modal-js
File Size: | 16.6 KB |
---|---|
Views Total: | 1638 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

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.