Minimal Modal Popup Plugin with jQuery - modal.js

modal.js is a minimal jQuery plugin to show a highly customizable modal popup that is always centered in your screen.

Features:

• Draggable modal popups without jQuery UI.
• Auto open & auto close.
• Supports Ajax content.
• Fullscreen overlay.
• Can be placed anywhere on your web page.
• Custom popup animations.

Basic usage:

1. Download the plugin and include the modal.css and jquery.modal.js on your web page.

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

2. Create a link to toggle a basic modal.

<a href="#" class="modal">Open Modal</a>

3. Create a link to toggle a modal containing an external link.

<a href="test.html" class="modal-ajax">Open Modal</a>

4. Call the plugin on the toggle links.

// Basic modal
$('.modal').modal({message:'Your message'});

// Ajax modal
$('.modal-ajax').modal();

5. Available options to customize your modal popups.

width:400,
height:300,
showSpeed: 500,
closeSpeed: 500,
position:{}, // e.g. {top:"200px",right:"10px"}.
autoClose:0,
buttons:{},
message:'',
overlay:true,
shadow:true,
autoOpen: false,
title:true,
draggable:false,
action:'fade',
skin:'' // skin class name

---

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