Best jQuery Dialog Plugins & Tutorials with Demo

    Vex : Beautiful, functional, dialogs in Javascript

    November 25, 2013 | Popup Window
    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
    Read More Demo

    MultiDialog : jQuery UI Dialog Widget

    September 15, 2013 | Ajax, Plugins, Popup Window
    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
    Read More Demo

    Bootstrap Lightbox with jQuery

    July 18, 2013 | Bootstrap, Plugins, Popup Window, Responsive
    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.

    Read More Demo

    Nifty Modal Window Effects with CSS3 & JavaScript

    June 26, 2013 | Core Java Script, CSS2 / CSS3.0, Popup Window
    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).

    Read More Demo

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

    May 28, 2013 | Bootstrap, Plugins, Popup Window
    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.

    Read More Demo

    jQuery Facebook Photo Selector

    May 6, 2013 | Gallery, Other API, Plugins
    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.

    Read More Demo

    alertify.js : JavaScript Alert/Notification System

    December 1, 2012 | Core Java Script, Popup Window
    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
    Read More Demo

    Pop-up Survey with jQuery UI Dialog

    September 17, 2012 | jQuery UI, PHP, Popup Window
    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.

    Read More Demo

    jQuery Mobile Datebox

    September 2, 2012 | Calendar, jQuery Mobile
    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
    Read More Demo

    FrameWarp : jQuery plugin for displaying pages in a neat overlay

    July 22, 2012 | Plugins, Popup Window
    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.
    Read More Demo