Smooth Adaptive Modal Window Plugin - jQuery mt-popup

mt-popup is a jQuery popup plugin for creating fully responsive modal windows that dynamically adapt the screen width on window resize.

The modal window slides down from the top of the webpage when lanuched and fades out on close. Smooth animations based on CSS3 transitions.

How to use it:

1. Load the necessary stylesheet style.css for the basic styling of the modal window.

<link rel="stylesheet" href="style.css">

2. Create a link with the CSS class of 'modal-popup' to toggle the modal window.

<a href="javascript:void(0)" 
   class="modal-popup">
   Launch
</a>

3. Define the modal content in the 'data-title' attribute:

<a href="javascript:void(0)" 
   class="modal-popup"
   data-title="This is a modal">
   Launch
</a>

4. Load jQuery library and the jQuery mt-popup plugin at the end of the document.

<script src="https://code.jquery.com/jquery-3.3.1.min.js" 
        integrity="sha384-tsQFqpEReu7ZLhBV2VZlAu7zcOV+rXbYlF2cqB8txI/8aZajjp4Bqd+V6D5IgvKT" 
        crossorigin="anonymous"></script>
<script src="mt-popup-plugin.js"></script>

5. Enable the link to lanuch the modal window.

$(function(){
  $( "a" ).showLinkLocation();
})

6. Customize the trigger link.

$(function(){
  $( "a" ).showLinkLocation({

    // text color
    color: "#556b2f",

    // class appended to the trigger element
    class: "white"
    
  });
})

7. Set the header of the modal window.

$(function(){
  $( "a" ).showLinkLocation({

    header: 'Modal Header'

  });
})

---

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