Best jQuery Popup Window Plugins & Tutorials with Demo

Fluidbox : jQuery Lightbox with fluid Transitions

Fluidbox : jQuery Lightbox with fluid Transitions

Replicating and improving the lightbox module seen on Medium with fluid transitions.As Fluidbox relies on CSS transforms, it only works with thumbnails that share the same aspect ratio with their higher resolution counterparts, otherwise the larger image will be cropped off, i.e. a square thumbnail linking to a landscape photo will cause the landscape photo to appear in a square frame. Fluidbox, serving as an alternative lightbox module, also assume that the image you have linked contains sufficient resolution to be displayed on the monitor — low resolution images will scale poorly on a large display.

jQuery Bootstrap Dialog

jQuery Bootstrap Dialog

Make use of Twitter Bootstrap’s modal more monkey-friendly with this jquery plugin.

Boxaroo : jQuery Animated Puch Pack into Lightbox

Boxaroo : jQuery Animated Puch Pack into Lightbox

Boxaroo packs a punch into the Lightbox – providing full customization control over the environment while catering to both beginners and developers. Packed to the gills with nearly 400MB of optimized graphics (66 Envato Marketplace Items) and over 170 optional settings – Boxaroo is possibly the most flexible and customizable Lightbox solution yet.

Features:

  • 66 Envato Marketplace Items 
  • 170 Customization Settings
  • Minified Production + Source Code
  • 6 pre-built Skins
  • 10 CSS3 Preloaders with GIF Fallbacks
  • 800 Premium Backgrounds
  • 100+ Navigation Button Graphics
  • 100+ Seamless Tiles
  • Customizable Thumbnail Hover Effects
  • Comprehensive and Interactive Documentation

Fullscreen Overlay Effects with CSS3 & JavaScript

Fullscreen Overlay Effects with CSS3 & JavaScript

Some simple and creative overlay styles and effects. From sliding the overlay into the viewport to using SVG morphing shapes, we explore some effects for fullscreen overlays.

The special thing about these overlays is that they don’t have a fixed size like modals but they occupy all the screen, so when creating effects one has to take that into account and not overdo it. But that does not mean that we can’t go crazy and use some fresh and interesting effects, like, for example, morphing SVG shapes.

CoverPop : JavaScript modal plugin with Cookie integration

CoverPop : JavaScript modal plugin with Cookie integration

CoverPop is a lightweight lightbox popup plugin with cookie integration. Style agnostic. Responsive friendly.If you are trying to show up a lightbox popup similar first time visitors that is easily styleable and has cookie integration, this is for you.

If you are trying to show a colorbox image when someone clicks on an internal link, this isn’t for you.

jQuery confirmOn plugin

jQuery confirmOn plugin

A jQuery plugin for adding an easy ‘are you sure’ confirmation pop-up to a button.The confirmOn plugin shows a confirmation box when the provided events are triggered. It works exactly like jQuery’s .on() but with a confirmation step between the event and the handler. When the user answers the confirmation dialog, the handler is called with the answer as a parameter, so you can decide what to do next. The user can press the escape key which closes the dialog and doesn’t call the yes or no handlers.

Boxer : jQuery plugin for displaying images and content in a modal overlay

Boxer : jQuery plugin for displaying images and content in a modal overlay

A jQuery plugin for overlaying images or content.Boxer is a simple way to display images, inline-content or iFramed URLs in a lightbox-style modal.

Nivo Lightbox : jQuery Responsive lightbox plugin

Nivo Lightbox : jQuery Responsive lightbox plugin

A simple, flexible, responsive, retina-ready jQuery lightbox plugin.The Nivo Lightbox automatically detects the type of content you are trying to show and loads it correctly. No extra setup required. So no matter if you are trying to show images, image galleries, AJAX, Flash, Youtube or Vimeo videos, another website or just inline HTML, Nivo Lightbox has you covered.

The Nivo Lightbox uses some cutting edge CSS transition effects to make your content display in as beautiful a way as possible. We employ some progressive enhancement to make the lightbox look stunning in newer browsers, but still function correctly in older browser.

jQuery Tip Cards

jQuery Tip Cards

Tip Cards plugin let you create a layout of cards with a card-like interaction that you see on Google Tips Page. I’ve also added several new animation options so that you can personalize it to your own liking.

VenoBox : Responsive jQuery lightbox plugin

VenoBox : Responsive jQuery lightbox plugin

Just another responsive jQuery lightbox plugin, suitable for images, inline contents, iFrames, Google Maps, Vimeo and YouTube videos.

The big difference compared to many others plugins like this is that VenoBox calculates the max width of the image displayed and preserves its height if is taller than the window (so in small devices you can scroll down the content, avoiding vertical microscopic resized images).