Sliding Fullscreen Modal Plugin For jQuery - full-modal
File Size: | 59.4 KB |
---|---|
Views Total: | 3351 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

full-modal is a jQuery plugin to create a configurable, responsive, fullscreen modal window that slides out from the edge of the screen just like the off-canvas sidebar. Compatible with Bootstrap framework.
Installation:
# Yarn $ yarn add full-modal # NPM $ npm install full-modal --save
How to use it:
1. Link to jQuery library and the jQuery full-modal plugin's files as follows:
<link rel="stylesheet" href="jquery.plugin.full-modal.min.css"> <script src="//code.jquery.com/jquery.min.js"></script> <script src="jquery.plugin.full-modal.min.js"></script>
2. Add your own content & actions buttons to the modal window.
<div class="ibs-full-modal-container" id="modal-demo"> <div class="ibs-full-modal"> <header class="ibs-modal-header"> <h4 class="ibs-modal-title">Modal Title</h4> <span class="ibs-btn-close">×</span> </header> <div class="ibs-modal-body has-header has-footer"> Modal Content Here </div> <div class="ibs-modal-footer text-right"> <button class="btn btn-default" id="closeBtn">Cancel</button> <button class="btn btn-success">Confirm</button> </div> </div> </div>
3. Initialize the jQuery full-modal plugin with default settings:
$('.ibs-full-modal-container').fullModal();
4. Show the modal window on the screen.
$('#modal-demo').fullModal('open');
5. Close the modal window when needed.
$('#modal-demo').fullModal('close');
6. All default configurations to customize the modal window.
$('.ibs-full-modal-container').fullModal({ // duration of animation duration: 300, // trigger element trigger: '', // close the moda by clicking on the background overlay closeWhenClickBackdrop: true, // origin parameter for postMessage origin: '*', });
7. Callback functions.
$('.ibs-full-modal-container').fullModal({ beforeOpen: $.noop, beforeClose: $.noop, afterOpen: $.noop, afterClose: $.noop });
8. API methods.
// opens the modal $('.ibs-full-modal-container').fullModal('open'); // closes the modal $('.ibs-full-modal-container').fullModal('close'); // scrolls to the top $('.ibs-full-modal-container').fullModal('scrollTop',20');
Changelog:
2018-06-21
- Improvement.
2017-11-14
- Improvement.
2017-11-01
- adjust CSS styles.
2017-10-26
- Bugfix.
2017-10-20
- Bugfix.
2017-10-19
- JS & CSS updated
2017-10-18
- JS & CSS updated
2017-10-10
- Added more API
This awesome jQuery plugin is developed by parox2014. For more Advanced Usages, please check the demo page or visit the official website.