Всплывающий слой на JQuery
Знаю, это просто, но не хочется тратить полдня так как не спец по JQuery.
Итак есть ссылка/кнопка или любой элемент в любом месте экрана. При нажатии на него, рядом с ним должен появляться слой в подгрузкой в него данных через ajax.
Я хотел сделать появление слоя для авторизации, примерно как тут: http://vkarpati.com/
Важные моменты:
1) Хотелось бы получить некий универсальный JQ-модуль, что бы можно было его подключать и передавать параметры:
$('.supertooltip').supertooltip({
id : 'supertooltipLayer', // задаем вручную ID вспл. слоя
event : 'hover', // click
position : 'bottom', // top/left/right/bottom
ajaxLoad : 'href', // HREF в ссылке для загрузки HTML-данных, но можно задать любой параметр тега, что к примеру в кнопке указывать data-href="...."
delay : 0, // время до показа слоя, милисек
duration : 500, // время перед пропаданием слоя, милисек
xOffset : 15, // X offset will allow the tooltip to appear offset by x pixels.
yOffset : 15, // Y offset will allow the tooltip to appear offset by y pixels.
opacity : 0, // 0 is completely opaque and 100 completely transparent
});
2) Если параметр "ajaxLoad" не указан, смотрится параметр тега TITLE, если пустой тогда ALT и если не пустой - показывается всплывающим слоем.
3) Слой должен плавно выезжать при нажатии или наведении на "вход", события нажатия/наведения надо выбирать в конфиге модуля;
Вроде все написал..
Нужно дешевое решение с минимум кода.
В качестве красоты можно в CSS забить нечто:
.supertooltipLayer{
background: none repeat scroll 0 0 #FAFAFA;
border-radius: 0 7px 7px 7px;
border-top: medium none;
box-shadow: 0 2px 3px rgba(0, 0, 0, 0.5), -1px 0 0 #FFFFFF inset, 1px -1px 0 #FFFFFF inset;
padding: 5px 0;
text-shadow: 0 1px 0 #FFFFFF;
}
Я немного поковырял какой то из бесплатных решений, но что то не пошло, можете скачать и посмотреть наброски во вложении "supertooltip.rar" ...
Можете взглянуть на решения, которые я нашел:
http://craigsworks.com/projects/simpletip/,
http://hernan.amiune.com/labs/jQuery-Tooltip-Plugin/jQuery-Tooltip-Plugin.html,
http://rndnext.blogspot.com/2009/02/jquery-ajax-tooltip.html,
http://jqueryfordesigners.com/demo/coda-bubble.html,
http://freelance.ru/ - кнопка "вход"