Best jQuery Dialog Plugins & Tutorials with Demo

    FBModal : Facebook like Modal Dialog jQuery plugin

    FBModal : Facebook like Modal Dialog jQuery plugin

    FBModal is a jQuery plugin that is the first Facebook replica modal dialog.FBModal provides a simple ways to invoke a modal dialog.

    Here is an example of how you can use FBModal in your project. Simply include the latest jQuery library, the plugin file and the css file.Then call the fbmodal() function on a jQuery element and a modal dialog will be displayed using the contents of that element. It’s that simple.

    jQuery YouTube Popup Player Plugin

    jQuery YouTube Popup Player Plugin

    This is an easy to use jQuery Plugin to embed YouTube videos on your page by displaying them in a popup dialog box. I have used jQuery UI Dialog Widget as the popup container instead of reinventing the wheel. jQuery UI Dialog is a robust cross-browser mechanism to display a popup dialog box with title bar including a movable box with modal behavior.

    This is plugin is very simple to configure and use. YouTube Video Id can be stored in any attribute of the DOM element. This plugin keeps track of all the assigned popup events and won’t assign the click event if there already exists one, that way you can reassign the event for dynamically added HTML elements without affecting the existing ones.

    boxy : Facebook-like jQuery dialog/overlay with Demo

    boxy : Facebook-like jQuery dialog/overlay with Demo

    boxy is a animated facebook like jquery dialog/overlay box.

    Zebra_Dialog – a lightweight jQuery dialog box plugin

    Zebra_Dialog - a lightweight jQuery dialog box plugin

    Zebra_Dialog is a small and highly configurable dialog box plugin for jQuery, meant to replace JavaScript’s “alert” and “confirmation” dialog boxes and built using the jQuery Plugin Boilerplate.Can also be used as a notification widget – when configured to show no buttons and to close automatically – for updates or errors, without distracting users from their browser experience by displaying obtrusive alerts.

    Features:

    • great looks – out of the box
    • 5 types of dialog boxes available: confirmation, information, warning, error and question;
    • easily customizable appearance by changing the CSS file
    • create modal or non-modal dialog boxes
    • easily add custom buttons
    • position the dialog box wherever you want – not just in the middle of the screen
    • use callback functions to handle user’s choice

    jqDnR – Minimalistic jQuery Drag’n’Resize

    jqDnR – Minimalistic jQuery Drag’n'Resize

    jqDnR is a lightweight plugin for jQuery that lets you drag, drop, and resize elements. jqDnR provides the all the basic elastic functionality most dialogs will need. Basic and simple and easy to use.

    Features:

    • Drag + Drop Element Posistioning
    • South East Resizing
    • Definable Drag and Resize “handles”
    • Translucent Dragging, Preservation of Original Opacity

    jQuery Dialogr a dialog box with extra features

    jQuery Dialogr a dialog box with extra features

    This jQuery plugin is a modified copy of jQuery UI Dialog widget, adding minimize, restore and maximize buttons.

    Bootbox.js – alert, confirm and flexible dialogs for twitter’s bootstrap framework

    jquery alert, confirm and flexible dialogs for twitter's bootstrap framework

    I’ve been using twitter’s bootstrap framework for a number of site builds recently, mainly because it gets me from black-and-white markup to vaguely-presentable websites in a very small amount of time. Version 1.3 introduced some JavaScript plugins to complement the array of stylistic elements it already provided – notably code to invoke dialog boxes, or modals…

    SimpleModal a jQuery plugin for modal dialog

    SimpleModal a jQuery plugin for modal dialog

    SimpleModal is a lightweight jQuery plugin that provides a simple interface for creating a modal dialog. The goal of SimpleModal is to provide developers with a cross-browser overlay and container that will be populated with data provided to SimpleModal.

    How to Create a jQuery Confirm Dialog Replacement

    How to Create a jQuery Confirm Dialog Replacement

    We are building a cross-browser, custom confirm dialog in the form of an easy to use jQuery plugin. You can choose the text, buttons, and actions that will be executed when they are clicked.