Best Period Picker
copysite.v.3

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');
})