Web — мастер

В этом примере мы будем говорить о создании диалогового пользовательского окна. Для реализации этого будем использовать всеми любимую библиотеку JQuery и специальный для неё плагин UI Dialog. Этот плагин позволяет выбирать текст, кнопки и их поведение и многие другие параметры окна диалогов. Такие диалоговые окна очень удобны, и похожи на модальные окна в Windows, в них также содержится в верхнем углу кнопка с крестиком для закрытия, и они могут масштабироваться и перемещаться по экрану пользователем.

Demo просмотреть архив

HTML

Как обычно начнём с HTML, это основной код разметки со всеми примерами.

                Open dialog 1  Open dialog 2  Modal dialog #3      Move to top dialog 1  Move to top dialog 2  Modal dialog #4        Enable dialog 1  Enable dialog 2      Disable dialog 1  Disable dialog 2          
This dialog using 'slide/explode' methods to show/hide, plus, can be closed by 'close' button, by 'x' icon and by 'esc' button. This dialog window can be moved using mouse.        
This dialog using 'blind/fold' methods to show/hide, plus, can be closed by 'x' icon and by 'esc' button. This dialog window can be moved and resized using mouse.        
This is the first modal dialog with some text and 2 buttons. This dialog window can be moved, resized and closed with the 'x' icon.        
Another sample of modal dialogs - login forms. The dialog using 'highlight/scale' methods to 'show/hide'. Can be moved and closed with the 'x' icon.      Name  
  Password             

CSS / main.css

body {background:#eee; font-family:Verdana, Helvetica, Arial, sans-serif; margin:0; padding:0 } .example { background:#FFF;width:600px; height:200px; font-size:80%; border:1px #000 solid; margin:0.5em 10% 0.5em; padding:1em 2em 2em; -moz-border-radius:3px; -webkit-border-radius:3px } .example button  { width:150px }

JS / main.js

Это наиболее важная часть всего примера,  здесь заключены все необходимые стили и поведения окна диалогов, вы можете добавлять свои собственные события, для этого посетите этот сайт для получения полной информации о всех  вариантах, методах диалогового окна.

$(function(){  // Диалоговое окно Свойства 1  $('#dialog1').dialog({  autoOpen: false,  show: 'slide',  hide: 'explode',  buttons: { 'Close': function() { $(this).dialog('close'); } },  closeOnEscape: true,  resizable: false  });    // Диалоговое окно 1 открыть / закрыть  $('#toggle1').click(function() {  if ($('#dialog1').dialog('isOpen') == true)  $('#dialog1').dialog('close');  else  $('#dialog1').dialog('open');  return false;  });    // Диалоговое окно Свойства 2  $('#dialog2').dialog({  autoOpen: false,  show: 'blind',  hide: 'fold',  closeOnEscape: true  });    // Диалоговое окно 2 открыть / закрыть  $('#toggle2').click(function() {  if ($('#dialog2').dialog('isOpen') == true)  $('#dialog2').dialog('close');  else  $('#dialog2').dialog('open');  return false;  });    // Диалоговое окно Свойства 3  $('#dialog3').dialog({  autoOpen: false,  show: 'fade',  hide: 'fade',  modal: true,  buttons: {  'Ok': function() { $(this).dialog('close'); },  'Close': function() { $(this).dialog('close'); }  },  resizable: false  });    // Диалоговое окно 3 открыть / закрыть  $('#toggle3').click(function() {  if ($('#dialog3').dialog('isOpen') == true)  $('#dialog3').dialog('close');  else  $('#dialog3').dialog('open');  return false;  });    // Диалоговое окно Свойства 4  $('#dialog4').dialog({  autoOpen: false,  show: 'highlight',  hide: 'scale',  modal: true,  buttons: {  'Login': function() {  var name = $('#name').val(), password = $('#password').val();  var mydialog4 = $(this);    if (name != '' && password != '') {  $.ajax({  type: 'POST',  url: 'some.php',  data: 'name='+name+'&pass='+password,  success: function(msg){  alert(msg);  $(mydialog4).dialog('close');  }  });  }  },  'Close': function() { $(this).dialog('close'); }  },  resizable: false,  width: '400px'  });    // Диалоговое окно 4 открыть / закрыть  $('#toggle4').click(function() {  if ($('#dialog4').dialog('isOpen') == true)  $('#dialog4').dialog('close');  else  $('#dialog4').dialog('open');  return false;  });    // Переместить наверх функция  $('#top1').click(function() {  $('#dialog1').dialog('moveToTop');  });    $('#top2').click(function() {  $('#dialog2').dialog('moveToTop');  });    // функция включить  $('#enable1').click(function() {  $('#dialog1').dialog('enable');  });    $('#enable2').click(function() {  $('#dialog2').dialog('enable');  });    // функция закрыть  $('#disable1').click(function() {  $('#dialog1').dialog('disable');  });    $('#disable2').click(function() {  $('#dialog2').dialog('disable');  }); });