This time I will share jQuery Plugin and tutorial about Minimal Modal Window For Inline Content – leanModal2, hope it will help you in programming stack.
leanModal2 is an upgrade version of the legacy jQuery leanModal plugin that helps you create minimal, easy-to-style modal windows from inline elements containing any content within the document.
More features:
- FadeIn & FadeOut animations based on CSS3.
- Closes the modal window by clicking the background overlay.
- And/or by pressing the ESC key.
- Always keep the modal be center on window resize.
How to use it:
1. Create the html content to display in the modal window.
1 |
<div id="modal-id" class="display-none example js-leanmodal-modal"> |
3 |
<p>This is a modal window</p> |
4 |
<a class="js-leanmodal-close">Close</a> |
2. Hide the modal window on page load.
1 |
.display-none { display: none; } |
3. Styleize the modal window whatever you like.
3 |
background-color: #fafafa; |
4. Create a trigger element to toggle the modal window. Note that the value of ‘data-modal-id’ attribute must match the modal ID.
1 |
<button class="leanmodal-trigger" |
2 |
data-modal-id="#modal-id"> |
5. Insert jQuery JavaScript library (slim build) and the jQuery leanModal2 plugin into the file.
2 |
integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" |
3 |
crossorigin="anonymous"></script> |
4 |
<script src="jQuery.leanModal2.js"></script> |
6. Enable the trigger element to toggle the modal window as needed.
1 |
$('.trigger-element').leanModal(); |
7. Possible configuration options with default values.
01 |
$('.trigger-element').leanModal({ |
13 |
closeButton: '.js-leanmodal-close', |
16 |
disableCloseOnOverlayClick: false, |
19 |
disableCloseOnEscape: false, |
This awesome jQuery plugin is developed by eustasy. For more Advanced Usages, please check the demo page or visit the official website.
