CSS3 Animated Fullscreen Modal Plugin For jQuery

ap-fullscreen-modal is a tiny jQuery plugin used for showing a responsive, fullscreen modal window with a configurable CSS3 powered animation.

How to use it:

1. Place the required stylesheet ap-fullscreen-modal.css in your document's head section:

<link rel="stylesheet" href="ap-fullscreen-modal.css">

2. Insert your content into the modal window and make it hidden on page load.

<div style="display: none;">
  <div id="modal-content-demo" class="modal-content">
    <div class="wrapper">
      Modal Content
    </div>
  </div>
</div>

3. Create a trigger element to open the modal window.

<input type="button" value="Modal" id="open-modal">

4. Call the function and specify the selector for the modal trigger element.

$('#modal-content-demo').apFullscreenModal({
  openSelector: '#open-modal'
});

5. Change the background color of the modal window.

$('#modal-content-demo').apFullscreenModal({
  openSelector: '#open-modal',
  backgroundColor: '#222',
});

6. Specify the selector for the modal close element(s).

$('#modal-content-demo').apFullscreenModal({
  openSelector: '#open-modal',
  backgroundColor: '#222',
  closeSelector: '.close-modal'
});

7. Hide the close button.

$('#modal-content-demo').apFullscreenModal({
  openSelector: '#open-modal',
  showCloseButton: false
});

8. Adjust the duration for the CSS3 animation.

$('#modal-content-demo').apFullscreenModal({
  openSelector: '#open-modal',
  animationDuration: 200
});

9. Make the modal auto open on page load.

$('#modal-content-demo').apFullscreenModal({
  openSelector: '#open-modal',
  autoOpen: true
});

Change log:

2016-05-06

• Fixed selection problem

2016-05-03

• Version 0.4.0 -- Some more fixes

---

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