Удобный 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>')
 }
})

Диалог с Vimeo плеером и с пользовательскими кнопками

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

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

Открыть большую статью из Википедии

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

$("<div>Hello world<div>").dialog({title: 'Vimeo video'});//
//or
jAlert('Hello!', function(){}, 'My Title');

$('<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
}})

$('<div>Привет</div>').dialog({closeFunction:'hide'})

$('<div>Привет</div>').dialog({showFunction:'show'})

$('<div>Привет</div>').dialog({closeBtn:false})

$('<div>Привет</div>').dialog({closeOnClickOutside:false})

$('<div>Привет</div>').dialog({closeOnEsc:false})

$('<div>Hello</div>').dialog({clickDefaultButtonOnEnter:false})

$('<div>Привет</div>').dialog({zIndex:10000})

$('<div>Hello<.div>').dialog({modal:false})

var $dlg = $('<div>Hello</div>').dialog({shown:false});
// какие-то действия
$dlg.dialog('show');

var $dlg = $('<div>Привет</div>').dialog({removeOnHide:false});
$dlg.dialog('hide');
// какие-то действия
$dlg.dialog('show');

var $dlg = $('<div>Привет</div>').dialog({hideGlobalScrollbar: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';

var $dlg = jAlert('Привет', function() {jAlert('I fired')});
//...
$dlg.dialog('ok');

var $dlg = jAlert('Привет', function() {jAlert('Меня нажали')});
//...
$dlg.dialog('hide');

var $dlg = $('<div></div>').dialog({shown:false});
//...
$dlg.dialog('show');

var $dlg = jAlert('Hi', function() {}, 'First Title');
//...
$dlg.dialog('title', 'Second Title');

var $dlg = jAlert('', function() {}, 'First Title');
//...
$dlg.dialog('content', 'Hi<br>'.repeat(100));

function (msg, callback, title){...}

jAlert('Привет мир', function (){jAlert(111)},'Title')

function (msg, callback, title){...}

jConfirm('Вы уверены?', function (){jAlert(111)},'Title')

function (msg, default_value, callback, title){...}

jPrompt('Введите свое имя?','Иван', function (){jAlert(111)},'Ваше имя')

function (title, with_close, not_close_on_click){...}

var $dlg = jWait('Please wait!', false, true);
$.get('index.php',function () {
	$dlg.dialog('hide');
})

Оставлять комментарии могут только зарегистрированные пользователи

Комментарии  

# Дмитрий123 11.11.2020 11:29

Здравствуйте.
Мне необходимо создать свой confirm, т.к. у стандартного нет возможности покрасить текст

Для этого условия
else if($('#cause').val() == 25){
strMessage1 = (typeof strMessage1 !== 'undefined') ? strMessage1 : 'Проверьте кодировку';
//return !!confirm( strMessage1 );
return !!confirm( strMessage1 );
//return !!lnv.confirm( strMessage1);
}

Обновить список комментариев