Удобный jQuery плагин для создания диалоговых оконЭтот плагин назревал уже очень давно. В процессе создания Конструктора Яндекс карт, пришлось воспользоваться наиболее известным jQueryUI. Он безусловно хорош, но избыточен. Минифицированная версия основного файла весит более 200 кб плюс еще на 100 кб стилей, и на 50 файлов со спрайтами. В комплексе, этот пакет решает несколько проблем, поэтому я его и использовал в конструкторе, однако если нужен только определенный функционал, то лучше использовать другие плагины.

Мне потребовался плагин для создания диалоговых окон. При том без обилия настроек для первого использования, но при этом чтобы они были, когда я захочу, что-то не стандартное.

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

Вот, что из этого вышло.

Простой плагин для создания кастомизированных модальных окон с кнопками. 

The simple jQuery Plugin for customizable modal windows with custom buttons. Отзывчивый к разным расширениям дизайн, легковесный, и просто в кастомизации плагин


Исходный код на GitHub или
Скачать (zip).

 

Плагин умеет открывать простой текст, HTML, любой контент, будь то изображение, форма или  iframe (YouTube, Vimeo, Google Maps). Плагин работает прекрасно на любых платформах и браузерах, за счет CSS правил, практически без JS манипуляций.

Для удобства работы плагин реализует несколько удобных глобальных функций, аналогичных оригинальным: jAlert, jConfirm, jPrompt

Как использовать

<!-- Этот код нужно вставить после закрытия тега </body> -->
<link rel="stylesheet" type="text/css" href="/jquery.dialog.css"/>
<script src="/jquery.js"></script>
<script src="/jquery.dialog.js"></script>

Alert

Простой аналог JS функции Alert

jAlert('Привет мир!!!')

Confirm

Аналог JS функции Confirm

jConfirm('Вы уверены?', function() {
	jAlert('Вы выбрали "OK"')
}, 'Заголовок')

Prompt

Диалог аналогичный JS функции Prompt с полем ввода

jPrompt('Введите свое имя', function(e, value) {
	jAlert('Ваше имя "'+value+'"')
})

Диалог загрузки

Диалог показывается в момент начала какой-либо загрузки

jWait('Пожалуйста ждите')

Изображение

Покажем элемент галереи, как это делает fancybox

$('<img src="/images/beautiful-eyes-wallpaper.png" alt="Изображение" title="Изображение" />')
	.dialog({modal:false});

Youtube видео

Диалог с открытием youtube видео ролика

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

Кастомизация кнопок

Диалог со своими кнопками

var vimeo = '<iframe src="//player.vimeo.com/video/10848092" width="500" height="281" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>';
$(vimeo).dialog({
 title: 'Vimeo видео',
 buttons:{
  'Перейти на Vimeo': function () {
   location = 'http://vimeo.com/10848092';
  },
  'Закрыть': function() {
   this.dialog('hide')
  },
  'Alert': function () {
   jAlert("Я в порядке");
   return false;
  },
  'Любой текст, он не будет выведен в кнопке':$('<a href="http://xdan.ru">Просто кнопка в виде ссылки</a>')
 }
})

Большой объем данныъ

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

Полный список опций

Название

Значение

по умолчанию

Пример
title ''
$("<div>Hello world<div>").dialog({title: 'Vimeo video'});//
//or
jAlert('Hello!', function(){}, 'My Title');
Необязательный параметр, заголовок диалогового окна
buttons {}  
Список кнопок
$('<div>Кто был первым космонавтом?</div>').dialog({
 buttons:{
  'Гагарин': function () {
   jAlert('Вы правы!');
   return false; // не закрывать основное окно
  },
  'Путин': function () {
    jAlert('Вы не правы!')
    return false;
  },
  'Армстронг': function () {
   jAlert('Нет, он был первый на Луне');
  },
  'Закрыть': function() {
    this.dialog('hide')
  },
  'Еще вариант кнопки закрытия': true, // close window
  'Любой текст':$('<a href="http://xdan.ru">Просто ссылка</a>') // custom button
}})
closeFunction fadeOut  
jQuery метод с помощью которого диалог будет закрываться
$('<div>Привет</div>').dialog({closeFunction:'hide'})
showFunction fadeIn  
jQuery метод с помощью которого диалог будет открываться
$('<div>Привет</div>').dialog({showFunction:'show'})
closeBtn true  
Показывать кнопку закрытия окна в правом верхнем углу
$('<div>Привет</div>').dialog({closeBtn:false})
closeOnClickOutside true  
Закрывать диалоговое окно, когда пользователь кликнул где-либо вне его
$('<div>Привет</div>').dialog({closeOnClickOutside:false})
closeOnEsc true  
Закрывать диалоговое окно при нажатии клавиши Escape
$('<div>Привет</div>').dialog({closeOnEsc:false})
clickDefaultButtonOnEnter true  
Запускать обработчик события нажатия дефолтной кнопки по нажатию Enter
$('<div>Hello</div>').dialog({clickDefaultButtonOnEnter:false})
zIndex 10  
Часто, случается так, что на сайте могут быть элементы z-index которых выше, чем у диалога. Это можно обойти, завад z-index
$('<div>Привет</div>').dialog({zIndex:10000})
Если false то окно будет запущено без оверлея, т.е. без фона
$('<div>Hello<.div>').dialog({modal:false})
shown true  
После создания диалога, он будет показан автоматически. Если вы хотите произвести какие-либо манипуляции с ним, до показа, то указывайте shown false
var $dlg = $('<div>Hello</div>').dialog({shown:false});
// какие-то действия
$dlg.dialog('show');
removeOnHide true  
Когда диалог закрывается, он польностью удаляется из DOM. Чтобы этого избежать можно сделать так removeOnHide:false
var $dlg = $('<div>Привет</div>').dialog({removeOnHide:false});
$dlg.dialog('hide');
// какие-то действия
$dlg.dialog('show');
hideGlobalScrollbar true  
При открытии диалога у всего сайта исчезает скроллбар. Если вам не нужно такое поведение то используйте это свойство в false
var $dlg = $('<div>Привет</div>').dialog({hideGlobalScrollbar:false});

Методы

resize Используется для пересчета позиции при изменении сдержимого диалога (только при modal:false)
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 Запускаем обработчик дефолтовой кнопки
var $dlg = jAlert('Привет', function() {jAlert('I fired')});
//...
$dlg.dialog('ok');
hide Закрыть окно
var $dlg = jAlert('Привет', function() {jAlert('Меня нажали')});
//...
$dlg.dialog('hide');
show Открыть скрытое окно
var $dlg = $('<div></div>').dialog({shown:false});
//...
$dlg.dialog('show');
title Установка загаловка окна
var $dlg = jAlert('Hi', function() {}, 'First Title');
//...
$dlg.dialog('title', 'Second Title');
content Установка содержимого диалога
var $dlg = jAlert('', function() {}, 'First Title');
//...
$dlg.dialog('content', 'Hi<br>'.repeat(100));

Функции помощники

jAlert Аналог «alert»
function (msg, callback, title){...}
jAlert('Привет мир', function (){jAlert(111)},'Title')
jConfirm Аналог «confirm»
function (msg, callback, title){...}
jConfirm('Вы уверены?', function (){jAlert(111)},'Title')
jPrompt Аналог «prompt» function
function (msg, default_value, callback, title){...}
jPrompt('Введите свое имя?','Иван', function (){jAlert(111)},'Ваше имя')
jWait Показ окна загрузки
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');
})
Рассказать друзьям

Добавить комментарий


Защитный код
Обновить