Best Period Picker

Dialog jQuery window dialog plugin

jQuery Best Dialog pluginThe simple jQuery Plugin for customizable modal windows with custom buttons. Responsive, lightweight, easy customizable modal window plugin
Source code on GitHub or
download (zip).

Fast, light, mobile-friendly and responsive lightbox and modal dialog plugin. Open plain text, HTML, any content, image, form, iframe (YouTube, Vimeo, Google Maps). Responsive work only through CSS rules.

This plugin helps you display modals, popups, and notices. For convenience, set up several similar js function: jAlert, jConfirm, jPrompt

<!-- this should go after your </body> -->
<link rel="stylesheet" type="text/css" href="/jquery.dialog.css"/>
<script src="/jquery.js"></script>
<script src="/jquery.dialog.js"></script>

Alert

Simple dialog analogue Alert

jAlert('Hello World!!!')

Confirm

Simple dialog analogue Confirm

jConfirm('Are you shure?', function() {
	jAlert('You click "OK"')
}, 'Title')

Prompt

Simple dialog with input field analogue Prompt

jPrompt('Enter your name', function(e, value) {
	jAlert('You name "'+value+'"')
})

Wait dialog

Dialog to display ajax progress or other load

jWait('Please wait')

Picture

Show gallery's item not modal

$('<img src="images/beautiful-eyes-wallpaper.png" alt="Open picture" title="Open picture" />')
	.dialog({modal:false});

Youtube video

Dialog with movie from YouTube

jAlert('<iframe width="560" height="315" src="//www.youtube.com/embed/fk24PuBUUkQ" frameborder="0" allowfullscreen></iframe>');

Custom buttons

Dialog with custom buttons

var vimeo = '<iframe src="//player.vimeo.com/video/10848092" width="500" height="281" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>';
$(vimeo).dialog({
 title: 'Vimeo video',
 buttons:{
  'Go to Vimeo': function () {
   location = 'http://vimeo.com/10848092';
  },
  'Close': function() {
   this.dialog('hide')
  },
  'Alert': function () {
   jAlert("I'm fine");
   return false;
  },
  'Any text':$('<a href="http://xdsoft.net">Custom button</a>') // custom button
 }
})

Big data

jAlert('<iframe width="1024" height="6993" src="//en.wikipedia.org/wiki/JQuery" frameborder="0" allowfullscreen></iframe>');

Full options list

Name default Ex.
title ''
$("<div>Hello world<div>").dialog({title: 'Vimeo video'});//
//or
jAlert('Hello!', function(){}, 'My Title');
Title header for dialog window
buttons {}
Buttons list, plain object
$('<div>Who was the first man on the moon?</div>').dialog({
 buttons:{
  'Gagarin': function () {
   jAlert('it is wrong!');
   return false; // do not close after choose
  },
  'Obama': function () {
    jAlert('it is wrong!')
    return false; // do not close after choose
  },
  'Armstrong': function () {
   jAlert('Congratulation! You right!');
  },
  'Close': function() {
    this.dialog('hide')
  },
  'Close Second': true, // close window
  'Any text':$('<a href="http://xdsoft.net">Custom button</a>') // custom button
}})
closeFunction fadeOut
jQuery method for hide dialog
$('<div>Hello</div>').dialog({closeFunction:'hide'})
showFunction fadeIn
jQuery method for show dialog
$('<div>Hello</div>').dialog({showFunction:'show'})
closeBtn true
Show close button in right top corner
$('<div>Hello</div>').dialog({closeBtn:false})
closeBtn true
Show close button in right top corner
$('<div>Hello</div>').dialog({closeBtn:false})
closeOnClickOutside true
Close window when user clicked on anywhere outside dialog window
$('<div>Hello</div>').dialog({closeOnClickOutside:false})
closeOnEsc true
Close window when user pressed Esc
$('<div>Hello</div>').dialog({closeOnEsc:false})
clickDefaultButtonOnEnter true
Start default button's handler when user pressed Enter
$('<div>Hello</div>').dialog({closeOnEsc:false})
zIndex 10
How on this site too, zIndex for dialog may be less than any block on site. In this case you can set big value for this option
$('<div>Hello</div>').dialog({zIndex:10000})
Open window without overlay
$('<div>Hello</div>').dialog({modal:false})
shown true
After init, plugin will be shown automatically, if you want to hide dialog before before you make certain that the action use shown:false
var $dlg = $('<div>Hello</div>').dialog({shown:false});
// some actions
$dlg.dialog('show');
removeOnHide true
When you close dialog window, it element will delete from DOM. If you don't want this, do removeOnHide:false
var $dlg = $('<div>Hello</div>').dialog({removeOnHide:false});
$dlg.dialog('hide');
// some actions
$dlg.dialog('show');
hideGlobalScrollbar true
How you could observe when dialog window opens, scrollbar for <body> hides. Sometimes it can work wrongly
var $dlg = $('<div>Hello</div>').dialog({hideGlobalScrollbar:false});

Methods

resize Use when window or content inside dialog (with modal:false) changed
var $dlg = $('<div></div>').dialog({shown:false, modal:true});
var image = new Image();
image.onload = function() {
 $dlg
  .resize('content', '<img src="'+image.src+'">')
  .resize('show')
  .resize('resize') 
}
image.src = './image.png';
ok Fire default button handler
var $dlg = jAlert('Hello', function() {jAlert('I fired')});
//...
$dlg.dialog('ok');
hide Hide dialog window
var $dlg = jAlert('Hello', function() {jAlert('I fired')});
//...
$dlg.dialog('hide');
show Hide dialog window
var $dlg = $('<div></div>').dialog({shown:false});
//...
$dlg.dialog('show');
title Set title for dialog window
var $dlg = jAlert('Hi', function() {}, 'First Title');
//...
$dlg.dialog('title', 'Second Title');
title Set title for dialog window
var $dlg = jAlert('Hi', function() {}, 'First Title');
//...
$dlg.dialog('title', 'Second Title');
content Set content for dialog window
var $dlg = jAlert('', function() {}, 'First Title');
//...
$dlg.dialog('content', 'Hi<br>'.repeat(100));

Helpers

jAlert Simple function analogue «alert»
function (msg, callback, title){...}
jAlert('Hello world', function (){jAlert(111)},'Title')
jConfirm Analogue «confirm» function
function (msg, callback, title){...}
jConfirm('Are you shure?', function (){jAlert(111)},'Title')
jPrompt Analogue «prompt» function
function (msg, default_value, callback, title){...}
jPrompt('Enter your name?','Jon', function (){jAlert(111)},'you name')
jWait Show waiting dialog
function (title, with_close, not_close_on_click){...}
with_close - show close button not_close_on_click - not close when user clicked outside dialog
var $dlg = jWait('Please wait!', false, true);
$.get('index.php',function () {
	$dlg.dialog('hide');
})

jQuery Slideshow with hardware-accelerated transitions

Responsive, accessible as a pure CSS slideshow. Prev/next navigation, bullets with thumbnails,...

Fixed Table Header and Left Column

jQuery plugin to modify a table element with a fixed header element and fixed left columns.

Easy responsive tabs to accordion

Easy responsive tabs - is a lightweight jQuery plugin which optimizes normal horizontal or...

jQuery DOM Cache

Using $.cache (or $.domCache) may dramatically increase the performance of your web application...

jQuery Marquee with CSS3 Support

jQuery plugin to scroll the text like the old traditional marquee. NOW with CSS3 support.

Bootstrap Image Gallery

Bootstrap Image Gallery is an extension to blueimp Gallery, a touch-enabled, responsive and...

jQuery Ajax Loading

jQuery Ajax Loading.

jScroll – jQuery Plugin for Infinite Scrolling / Auto-Paging

jScroll is a jQuery plugin allowing you to effortlessly implement infinite scrolling, lazy...

jQuery editable select box

This plugin allows you to make a select box editable like a text box while keeping it's...

Galereya

Responsive, easily customizable gallery with a masonry layout

Mosaic Flow

Pinterest like responsive image grid for jQuery that doesn’t suck.

TagCanvas HTML5 canvas tag cloud

Displays tags as a 3D rotating tag cloud using an HTML5 canvas

Card Deck Slideshow

This content slideshow script utilizes CSS3 transform to rotate and "unhinge" each...

jBox

jBox is a powerful and flexible jQuery plugin, taking care of all your modal windows, tooltips,...

WordPress Lightbox – Catalyst Template

Wordpress Image Lightbox. Catalyst Style DEMO. Wordpress Photo Lightbox maker comes with a...

jQuery Turtle

jQuery plugin for turtle graphics. Every element is a turtle that can rotate, move, animate,...

DataTable AJAX Pagination jQuery plugin

The best jQuery AJAX Pagination plugin——DataTable jQuery plugin!

Simple Calendar and Date Picker

A simple calendar and date picker only depends on JQuery

jQuery SumoSelect

SumoSelect is a jquery plugin which beautifully renders a single or multiple HTML select element....

jQuery Browser Rejection

jReject is a simple tool for rejecting specific browsers in a nice modal window

qTip2 – Pretty powerful tooltips

Introducing... qTip2. The second generation of the advanced qTip plugin for the ever popular...

jQuery Date and Time picker

jQuery plugin for date, time, or datetime manipulation in form

jQuery Circliful Plugin

jQuery plugin for showing circle statistics.

fancy input

Makes typing in input fields fun with CSS3 effects

Blindify

Blindify is a jQuery plugin which creates a slideshow featuring a blinds effect transitioning...

jQuery droparea

jQuery plugin for HTML5 drag-and-drop (images and files).

appendGrid – The dynamic table input jQuery plugin

appendGrid allow you to input structured data row by row such like filling spreadsheets. It...

Acxmenu – multilevel jquery accordion menu

Acxmenu - multilevel jquery accordion menu plugin for jQuery.

mBox fullscreen lightbox plugin

mBox is a true full-screen light box(modal box) solution. Full Screen feature is supported by...

Bootstrap Datagrid

bs_grid is a jQuery Datagrid plugin, based on Twitter Bootstrap. Advanced row selection, sorting,...

Flexible jQuery slider plugin

with ayaSlider you can create a flexible slider with multiple parallax effects, there is no...

Bootstrap Form Helpers Date Picker

Date Picker jQuery plugin for Bootstrap.

jQuery Photobox

A lightweight CSS3 image gallery plugin for jQuery that is pretty to look and and easy to use.

jQuery Tiles

Splits images in as many tiles as you want, even with a gap.

jQuery nanoGALLERY

Image gallery simplified. Touch enabled, responsive, justified/cascading/grid layout and it...

Bootstrap Auto-Hiding Navbar

An extension for Bootstrap's fixed navbar which hides the navbar while the page is scrolling...

Canvas Image Map Area Editor

Create and edit image map area polygons in a canvas-based GUI that replaces form elements.

aciTree – A customizable treeview control

aciTree renders a treeview control based on a simple data structure. The tree can be lazy loaded...

Bootstrap Tags Input

jQuery plugin providing a Twitter Bootstrap user interface for managing tags.

Switchy

This is a tiny jQuery plugin which can be used as both a switch or a slider.

jQuery Slider – WOW image slider

WOW Slider is a jQuery image slider plugin with fantastic visual effects and beautifully...

jQuery Clock or Timer plugin in retro flip-count down style

jQuery Clock,Timer or Counter plugin in retro flip-count down style. The plugin can display the...

jQuery Waterwheel Carousel

This jQuery plugin can display images with a cascading waterwheel effect.

jQuery Super Labels

Give your forms a helping of awesome!

autoNumeric – Currency formatting made easy

jQuery plugin that automatically formats currency (money) and numbers as you type on form inputs....

jQuery Number Format

Easily format numbers for display use. Replace numbers inline in a document, or return a...

jQuery Easy Ticker

jQuery easy ticker is a news ticker like plugin, which scrolls the list infinitely. It is highly...

jQuery AlignColumn

jQuery plugin for aligning columns of a table on decimal or other character.