Sliding Fullscreen Modal Plugin For jQuery - full-modal

File Size: 59.4 KB
Views Total: 3308
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
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.


# Yarn
$ yarn add full-modal

$ 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="//"></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>
    <div class="ibs-modal-body has-header has-footer">
      Modal Content Here
    <div class="ibs-modal-footer text-right">
      <button class="btn btn-default" id="closeBtn">Cancel</button>
      <button class="btn btn-success">Confirm</button>

3. Initialize the jQuery full-modal plugin with default settings:


4. Show the modal window on the screen.


5. Close the modal window when needed.


6. All default configurations to customize the modal window.


  // 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.


  beforeOpen: $.noop,
  beforeClose: $.noop,
  afterOpen: $.noop,
  afterClose: $.noop

8. API methods.

// opens the modal

// closes the modal

// scrolls to the top



  • Improvement.


  • Improvement.


  • adjust CSS styles.


  • Bugfix.


  • Bugfix.



  • JS & CSS updated


  • 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.