Tutorial FrameWarp – jQuery plugin for displaying pages in a neat overlay

DEMO     -      DOWNLOAD     -      SOURCE

While working on an exciting new web app, I found that I needed a way to show certain pages in an overlay window. This comes handy if you want to reuse something like a sharing or a settings page in different screens of your app. Instead of hacking together something that barely got the job done, I decided to take the time, do it properly and share you with you.

Of course, there is the option of using one of the numerous lightbox plugins to do this, but the plugin we will be creating in this tutorial has a lot of advantages over a generic lightbox script:

• Lightweight – it is created specifically for showing pages, not images;
• No UI, so the page feels like a dialog window;
• The page can close itself, and can also send messages to the parent window;
• Can optionally use a cache for faster subsequent page loads;
• Uses a neat CSS animation with a JavaScript fallback.