Sliding Fullscreen Modal Plugin For jQuery - full-modal

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">&times;</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.