Small and Easy-To-Use jQuery Scrollable Modal Plugin - portBox

portBox is a simple, fast, and easy-to-use jQuery plugin for creating modal boxes with scroll function support. Specially designed for those who want to display completed web design projects with photos of the site. Click the overlay and close button or press ESC key to close the modal box.

Basic Usage:

1. Include jQuery library and jQuery UI on your web page

<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>

2. Include jQuery portBox files on your web page

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

3. Create the html for the portBox Handler and modal content

<!-- portBox Handler -->
<a href="#" data-display="myBox">Click me</a>

<!-- portBox Content -->
<div id="myBox" class="portBox">

<!-- Your content here -->

</div>

4. Using html5 data-* attributes to set the opitons

<a href="#" data-display="myProject" data-animation="fade" data-animationspeed="200" data-closeBGclick="true">My Project</a>

5. All the options and values

• data-animation [default:fade] : blind, bounce, clip, drop, explode, fade, fold, highlight, puff, pulsate, scale, shake, size, slide, transfer
• data-animationspeed [default:200] : Sets the speed of entrance and exit animations, can be set to any numerical value
• data-closeBGclick [default:true]: Sets whether the portBox should close when the background is clicked or not, set to "true" or "false"

---

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