Best jQuery Dialog Plugins & Tutorials with Demo

Vex : Beautiful, functional, dialogs in Javascript

Vex : Beautiful, functional, dialogs in Javascript

Vex is a modern dialog library which is highly configurable, easily stylable, and gets out of the way. You’ll love vex because it’s tiny (6kb minified), has a clear and simple API, works on mobile devices, and can be customized to match your style in seconds.

Features:

  • Drop-in replacement for alert, confirm, and prompt
  • Easilly configurable animations which are smooth as butter
  • Tiny footprint (6kb minified) and only depends on jQuery
  • Looks and behaves great on mobile devices
  • Open multiple dialogs at once and close them individually or all at once
  • Built in CSS spinner for asynchronous dialogs

MultiDialog : jQuery UI Dialog Widget

MultiDialog : jQuery UI Dialog Widget

MultiDialog utilizes jQuery UI Dialog for a full featured Modalbox / Lightbox application.
It’s flexible, easy to use but yet extendable and fits great into the jQuery UI Widget family.

  • Use any jQuery selector or a powerful API
  • Feature rich, very flexible and easy to extend
  • Tested in FF, IE7+, Chrome & Safari
  • Built with a11y and RWD in mind

Bootstrap Lightbox with jQuery

Bootstrap Lightbox with jQuery

A simple lightbox plugin based on the bootstrap modal plugin.This is a plugin for Twitter Bootstrap that adds a lightbox that is based off the modal dialog.

Nifty Modal Window Effects with CSS3 & JavaScript

Nifty Modal Window Effects with CSS3 & JavaScript

Today we want to share some ideas for modal window effects with you. There are infinite possibilities for transitioning the appearance of a dialog box and we wanted to provide some ideas of how to show dialog boxes and provide some inspiration.

The idea is to have a trigger button (or any element) which will make a modal window appear on click using a simple transition (or animation).

Bootbox.js : jQuery flexible dialogs for Twitter’s Bootstrap

Bootbox.js : jQuery flexible dialogs for Twitter's Bootstrap

Bootbox.js is a small jQuery library which allows you to create programmatic dialog boxes using Twitter’s Bootstrap modals, without having to worry about creating, managing or removing any of the required DOM elements or JS event handlers.

jQuery Facebook Photo Selector

jQuery Facebook Photo Selector

A jQuery plugin to create a Facebook photo selector.This is an interface component that allows you to select a photo from your albums as if you were inside of Facebook. It mimics the ‘Change your profile picture’ dialogue, but allows you to customize it as you like.

alertify.js : JavaScript Alert/Notification System

alertify.js : JavaScript Alert/Notification System

Alertify is an unobtrusive customizable JavaScript notification system.

Features:

  • Fully customizable alert, confirm and prompt dialogs
  • Fully customizable unobtrusive notification system
  • Callback parameter handling both OK and Cancel button clicks
  • Chaining which allows queued dialogs

Pop-up Survey with jQuery UI Dialog

Pop-up Survey with jQuery UI Dialog

I was tasked with creating a pop-up survey for a project. Fairly simple whether I used the jQuery dialog or not so I added a “Thank you” dialog that displays the survey results with a lightweight, css-based bar chart just for fun.

Pop-up Behavior

  1. Pop-up survey opens when page loads. Pop-ups on window.unload or window close are being blocked by most browsers due to abuse and overuse.
  2. Cookie is set when survey submitted or user opts out (“No, thanks” click).
  3. Closing dialog will not set cookie

All survey data is stored in a database and jQuery .post is used to shuttle the information back and forth.

jQuery Mobile Datebox

jQuery Mobile Datebox

DateBox is a jQuery-mobile based date and time picker.Four display mode Standard, click-outside-to-close popup mode, Forced input modal popup mode, Unique page dialog mode,  Inline mode.

Features:

  • Android style date picker
  • Calendar style date picker
  • Slide style date picker
  • Flip Wheel style date or time picker
  • 12 and 24 hour time picker
  • Duration time picker

FrameWarp : jQuery plugin for displaying pages in a neat overlay

FrameWarp : jQuery plugin for displaying pages in a neat overlay

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.