Minimal Modal Window For Inline Content - leanModal2

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.

<div id="modal-id" class="display-none example js-leanmodal-modal">
  <h3>Hello World</h3>
  <p>This is a modal window</p>
  <a class="js-leanmodal-close">Close</a>
</div>

2. Hide the modal window on page load.

.display-none { display: none; }

3. Styleize the modal window whatever you like.

.example {
  border-radius: 5px; 
  background-color: #fafafa; 
  padding: 2em; 
}

4. Create a trigger element to toggle the modal window. Note that the value of 'data-modal-id' attribute must match the modal ID.

<button class="leanmodal-trigger" 
        data-modal-id="#modal-id">
        Launch The Modal
</button>

5. Insert jQuery JavaScript library (slim build) and the jQuery leanModal2 plugin into the file.

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" 
        integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" 
        crossorigin="anonymous"></script>
<script src="jQuery.leanModal2.js"></script>

6. Enable the trigger element to toggle the modal window as needed.

$('.trigger-element').leanModal();

7. Possible configuration options with default values.

$('.trigger-element').leanModal({

  // use default styles
  defaultStyles: true,

  // fade animation
  fadeTime: 200,

  // opacity of background overlay
  overlayOpacity: 0.7,

  // selector of close button
  closeButton: '.js-leanmodal-close',

  // disable close on overlay click
  disableCloseOnOverlayClick: false,

  // disable close by ESC key
  disableCloseOnEscape: false,

  // center the modal
  modalCenter: true
  
});

---

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