Best jQuery Popup Window Plugins & Tutorials with Demo

Quttons : Buttons made of Quantum Paper

Quttons : Buttons made of Quantum Paper

With this jQuery plugin you can hide any div behind a Quantum [Paper] Button or Qutton.

Qunatum Paper is a digital paper that can change its size, shape and color to accomodate new content. Quantum paper is part of Google’s new Material Design language.

Simple Lightbox : Touch-Friendly Image Lightbox with jQuery

Simple Lightbox : Touch-Friendly Image Lightbox with jQuery

Simple Lightbox is a touch-friendly image lightbox for mobile and desktop with jQuery.

Features:

  • Responsive
  • Touch-friendly
  • Lightweight
  • Preloading next and previous image
  • Android, iOS and Windows phone support
  • CSS3 Transitions with fallback for older browsers
  • Keyboard support
  • Easy to install, easy to use
  • Lots of options
  • Can use jQuery 1.x or 2.x

Effect Ideas for Image Grids with jQuery & CSS

Effect Ideas for Image Grids with jQuery & CSS

Today we’d like to share some inspiration for image grid effects. The idea is to animate the grid item when opening it, the other grid items’ disappearance and the new content. The content shown can be anything from just the larger version of the image and a title (think image gallery) or something like an album view. The common effect to all is the animation of the clicked grid image: we move it to the desired spot, scale it up and then replace it with a larger version. This creates a direct flow between the grid and the other (full) view.

Fullscreen Video Opening Animation with CSS3

Fullscreen Video Opening Animation with CSS3

In this in-depth tutorial we want to show you how to create a similar video opening effect to the one seen on momentsapp.com. If you click the “Watch the video” button on the Moments App page, you will see a new image appearing on the photo stack which contains a video. The animation is a slight rotation of the frame and a subtle scaling of the video, which already starts to play. The whole wrapper expands to full screen without any play controls; just the closing cross will be shown. Once the video ends, or, if the user clicks on the closing cross, the video will simply disappear.

Responsive jQuery Pop Up Gallery

Responsive jQuery Pop Up Gallery

In this tutorial you will lean how to create a an awesome popup gallery. Each gallery will have a small preview animation. This tutorial will provide you with five different popup galleries.

SVG Modal Window with CSS3

SVG Modal Window with CSS3

A simple modal window with an SVG background animated using Snap.svg.

Easy Z Modal – jQuery Modal Plugin

Easy Z Modal – jQuery Modal Plugin

The Easy Z Modal jquery is a simple and efficient modal plugin for jquery.

3D Bold Navigation in CSS & jQuery

3D Bold Navigation in CSS & jQuery

A bold navigation that slides in when active, replacing the current content in a 3D space.To increase the focus on the menu, we pushed the main content along the z-axis (by using CSS transformations we actually scale down the content size, we don’t use 3D translations, but the result is the same).

Squeezebox Portfolio Template in CSS & jQuery

Squeezebox Portfolio Template in CSS & jQuery

An intro block that slides out to uncover a gallery of portfolio items.

We’ve been experimenting with some motion effects to build a simple portfolio template. The idea is to show a gallery of projects as a separate, secondary module, with the first block still partially visible – just one click away.

Prompt21 : jQuery Prompt Plugin

Prompt21 : jQuery Prompt Plugin

A minimalist jQuery prompt plugin for the 21st Century.