Flexible Accessible Modal Plugin - jQuery modelo

File Size: 18.7 KB
Views Total: 880
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
Flexible Accessible Modal Plugin - jQuery modelo

modelo is a lightweight, responsive, accessible, simple-to-use jQuery modal box plugin that is easy to customize using your own CSS styles.

Comes with a configurable fade in/out transition effects when opening/closing the modal box.

Click the background overlay or close button/icon or press ESC key to close the modal. 

You can make the modal window always be centered on the screen no matter how you resize the window.

Optionally, you can add WAI-ARIA roles (button & dialog) to help make your modal box more accessible.

How to use it:

1. Insert the modelo plugin's JavaScript and CSS files into the document which has jQuery library loaded.

<link rel="stylesheet" href="src/modelo.css">
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha384-tsQFqpEReu7ZLhBV2VZlAu7zcOV+rXbYlF2cqB8txI/8aZajjp4Bqd+V6D5IgvKT" crossorigin="anonymous"></script>
<script src="src/modelo.js"></script>

2. Include the modal header, modal body, and modal footer (optional) to the modal box.

<div class="modal" id="modal-example" role="dialog" aria-hidden="true" data-modal>
  <div class="modal-content">
    <div class="modal-header">
      <button role="button" class="icon-close" aria-label="close-modal" data-modal="close-modal">X</button>
      <h2 class="modal-title">Modal Title</h2>
    </div>
    <div class="modal-body">
      <p>Modal Content</p>
    </div>
    <div class="modal-footer">
      <button role="button" class="btn-close" aria-label="close-modal" data-modal="close-modal">Close</button>
    </div>
  </div>
</div>

3. Initialzie the modal plugin.

$('#modal-example').modelo();

4. Set the max width of the modal box.

$('#modal-example').modelo({
  maxWidth: 500 // default: 600
});

5. Set the distance from the top.

$('#modal-example').modelo({
  top: 50 // default: 60
});

6. Center the modal on window resize.

$('#modal-example').modelo({
  centered: true // default: false
});

7. Set the duration of the animation.

$('#modal-example').modelo({
  fadeDuration: 500 // default: 600
});

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