Этот плагин назревал уже очень давно. В процессе создания Конструктора Яндекс карт , пришлось воспользоваться наиболее известным 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
Как использовать
<
link
rel
=
"stylesheet"
type
=
"text/css"
href
=
"/jquery.dialog.css"
/>
<
script
src
=
"/jquery.js"
></
script
>
<
script
src
=
"/jquery.dialog.js"
></
script
>
Alert
Простой аналог JS функции Alert
Попробовать
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>'
);
Открыть большую статью из Википедии
Полный список опций
Название
Значение
по умолчанию
Пример
title
''
$(
"<div>Hello world<div>"
).dialog({title:
'Vimeo video'
});
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
,
'Любой текст'
:$(
'<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})
modal
true
Если 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'
.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'
);
})
Комментарии
Мне необходимо создать свой confirm, т.к. у стандартного нет возможности покрасить текст
Для этого условия
else if($('#cause').val() == 25){
strMessage1 = (typeof strMessage1 !== 'undefined') ? strMessage1 : 'Проверьте кодировку';
//return !!confirm( strMessage1 );
return !!confirm( strMessage1 );
//return !!lnv.confirm( strMessage1);
}