portBox

small, simple, easy to use

portBox is a simple, light weight and easy to use modal jQuery plug-in. It was originally built to display completed web design projects with photos of the site, information about the project and what when into completing it, but it works as an everything modal as well. No on page JavaScript required, all you have to do is add the files and markup.

Project display demo

Joey Navarro.com

This is my personal portfolio website. I designed this site over 6 different ways each design looking nothing like the one before it and finally settling on the good ol' one page portfolio. All said and done I'm pretty happy with the end result.

  • CLIENT

  • Joey Navarro

  • ROLE

  • Design, Development, Maintenance

  • SKILLS

  • HTML/CSS, PHP, JavaScript/jQuery
Empty demo

What ever you want to add can go in here

Step 1: Attach portBox files and jQuery library

The portBox zip contains a combined portBox.slimscroll.min.js file and separate portBox slimmscroll files. If you don't want the scroll function or know you'll never need it, just add the stand alone portBox.min.js file.

Step 2: portBox Handler and Markup

Base Markup

Set the "data-display" attribute on th handler element equal to the ID of the portBox you want to display when the element is clicked.

The portBox Handler can be any HTML element but an anchor tag is always best.

Project Markup

This is the HTML markup for the portBox project layout.

Step 3: Set any options if you want to change the defaults

To set custom options on a portBox add "data-" followed by the option you want to change and equal to the new value.

The available options and values are:

data-animation [default:fade]

Sets the entrance animation for the portBox

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"