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.