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 Photobox

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

jQuery AlignColumn

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

imgLiquid

A jQuery Plugin to resize images to fit in a container.

Autocomplete like Google

Simple autocomplete like Google

jQuery Etherpad

jQuery plugin for embedding Etherpad

Usage & Examples

Include jQuery.js,

...

jQuery imagesScrolling

Jquery plugin images scrolling

jQuery FocusPoint

jQuery plugin for 'responsive cropping'. Dynamically crop images to fill available space without...

jQuery Month selector

jQueryUI Widget that enables to display and select a month and year using the mm.itemselector widget

Modern Blink

Modern Blink provides the behavior of the blink tag using CSS Animations. Will fallback to jQuery...

jQuery mSlide

Simple and easy to use slider-gallery with touch support.

Animated Table Sorter

Animated Table Sorter is a simple html table sorter, with the added benefit of animating the...

jQuery conventAccordion

jQuery plugin for horizontal and/or vertical accordion.

jQuery Waterwheel Carousel

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

Ezdz [izy-dizy]

A jQuery plugin to turn standard input type file into a nice drag&drop zone with validators...

jQuery Phoenix

jQuery plugin to save form fields values to Local Storage via HMTL5 Web Storage API. Lost...

appendGrid – The dynamic table input jQuery plugin

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

Zebra_Tooltips

A lightweight, highly-configurable jQuery plugin for creating simple but smart and visually...

jQuery Nice file Input

The jQuery Nice File Input Plugin provides batter looking file input HTML element, while making...

easing – easing functions for jQuery or standalone

Easing function for use with or without jQuery. In addition to the standard list of easing...

International Telephone Input

A jQuery plugin for entering international telephone numbers

A very light weight(2.5kb minified) modal window plugin which suits your basic needs.

modalBox.js is a very light weight modal window plugin packed with only most used features and...

Fotorama

A simple, stunning, powerful jQuery gallery.

plainModal

The simple jQuery Plugin for customizable modal windows.

jQuery PieTimer

A CSS3-based pie timer.

Zebra_Pin

A lightweight jQuery plugin for pinning any element to the page or to a container element

Rangy Inputs

jQuery plug-in for selection and caret manipulation within textareas and text inputs.

jQuery Number Format

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

jQuery Circliful Plugin

jQuery plugin for showing circle statistics.

jQuery Fullscreen

jQuery Fullscreen plugin allows you to open any element on a page in fullscreen mode without...

Bootstrap Tags Input

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

Responsive Carousel

Simple and friendly responsive carousel plugin for jQuery. This library accept any type of...

aciTree – A customizable treeview control

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

Mobiscroll Image & Text Scroller

Renders a scrollable list of images with or without optional text for easy data picking on touch...

jQuery Super Labels

Give your forms a helping of awesome!

jQuery UI Size Effect

Resize an element to a specified width and height.

Parallax ImageScroll

Parallax ImageScroll is a simple and easy jQuery plugin for creating image parallax effects when...

jQuery.popLockIt

A jQuery plugin for 'locking' short content in place as the user scrolls by longer content. For...

WysiBB – Wysiwyg BBcode editor

Wysiwyg BBcode editor based on jQuery

TimeTo

Timer countdown digital clock

blueimp Gallery

blueimp Gallery is a touch-enabled, responsive and customizable image and video gallery, carousel...

Easy responsive tabs to accordion

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

ImgAreaSelect – image selection/cropping plugin

ImgAreaSelect is a plugin for selecting a rectangular area of an image. It allows web developers...

jQuery Gridly

Gridly is a jQuery plugin that allows for dragging and dropping as well as resizing.

Alpaca Forms

Easy Forms Engine for jQuery / Bootstrap.

jQuery Form – Fancy Web Form Designer

Formoid - Super Easy jQuery Contact Forms, Online Email Form Maker. * Easy - Build any type of...

perfect-scrollbar

Tiny but perfect jquery scrollbar plugin.

BootStrap Maxlength

jQuery and Bootstrap plugin for character count on inputs

jQuery Lifestream

Show a stream of your online activity with jQuery
good