Easy jQuery Popdown Modal Dialog Plugin - popdown

popdown is an easy jQuery plugin used to load an Html page in a 'popdown' modal window that slides down from the top of your web page. The plugin currently supports any kind of Html elements like text, image, video, etc. It can help you load your contact form, login form and other important web pages in a lightbox-like modal window without leaving the current page.

How to use it:

1. Load the required popdown plugin stylesheet in the header of your page.

<link rel="stylesheet" href="css/jquery.popdown.css">

2. Create a link to load a web page in the modal window.

<a href="demo.html" class="popdown" title="Demo">Demo</a>

3. The demo page.

<div class="popdown-content">
<header>
<h2>Title</h2>
</header>
<section class="body">
Content
</section>
<footer>
<button class="close-popdown">Close</button>
</footer>
</div>

4. Load the jQuery javascript library and jQuery popdown plugin at the bottom of your page.

<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript" src="lib/jquery.popdown.js" /></script> 

5. Call the plugin.

<script type="text/javascript">
$(document).ready(function(){
$('.popdown').popdown();
});
</script>

Change log:

v1.0.0 (2014-02-10)

• Improved the loading efficiency, sizing, added minified version and updated the docs

v0.8.0 (2013-10-25)

• Improving the async loading

---

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