Minimal Responsive Modal Window Plugin For jQuery - modal.js

modal.js is a super small, fully responsive jQuery modal popup plugin that uses CSS3 transitions for the smooth animations and supports any html contents such as text, images, videos and more. Click on the blank area of the background overlay to close the modal window.

How to use it:

1. Load the necessary JavaScript and CSS files in the webpage as this:

<link rel="stylesheet" href="modal.css">
<script src="jquery.min.js"></script>
<script src="modal.js"></script>

2. The JavaScript to create default modal windows.

// plain text
$.modal('Plain Text');

// html form
var form = '<form>'+
            '<input type="text" name="username" placeholder="username" /><br>'+
            '<input type="text" name="password" placeholder="password" /><br>'+
            '<div class="btn submitBtn">Submit</div>'+
          '</form>';
$.modal(form);

// Youtube video
$.modal('<iframe width="560" height="315" src="https://www.youtube.com/embed/GL0rbxB9Lqg" frameborder="0" allowfullscreen></iframe>');

3. Options and defaults.

// plain text
$.modal('Plain Text',{

  // parent container
  parent:'body',

  // displays overlay
  overlay:false,

  // modal ID
  id:'.modal',

  // close on click
  closeOnClick: true,

  // default CSS classes
  placeholder: '.modal-content',
  animateClass: 'modal-animate',

  // custom close button
  closeBtn: ''
  
});

---

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