Неплохое всплывающее окошко на
jQuery для Вашего любимого сайта. В природе это известное как "модальное окно". Хороший и безупречный способ выводить много информации не вредя структуре сайта.
1.В
main.tpl перед
</head>
вставить скрипт:
<script type="text/javascript">
function showBlock() {
$(function(){
$('#DLE').dialog({
autoOpen: true,
show: 'fade',
hide: 'fade',
width: 550,
buttons: {
"Close Window" : function() {
$(this).dialog("close");
}
}
});
});
}
</script>
2.В нужное место в любой
*.tpl вставить следующее:
<div id="DLE" title="your site name" style="display:none;">
Your information is desired
</div>
<a href="#" onclick="showBlock(); return false;">Click Me :)</a>
После нажатия на "
Click Me :)" перед вами будет модальное окошко, как на скриншоте.
3. Открываете
engine/classes/js/dle_js.js и в самый низ вставляете:
function ShowMyModal() {
$(function(){
$('#DLE').dialog({
autoOpen: true,
show: 'fade',
hide: 'fade',
width: 'auto',
height: 'auto',
buttons: {"X":function(){$(this).dialog("close");}}});});
}
Теперь немного разберем. Функция называется
ShowMyModal, ее мы будем использовать для вызова модального окошка. Так же видите такое в коде #DLE - это ID блока, который изначально скрыт и будет показан после нажатия на кнопку, которую мы сделаем позже. Далее есть такие опции
autoOpen: true, show: 'fade',hide: 'fade', - оно Вам вряд ли понадобиться, дальше же есть опция
width: 'auto', - оно отвечает за длину вашего всплывающего окошка, можно указать авто длину, как это сделал я, а можно задать фиксированную, например так,
width: 500, где 500 - длина блока в пикселях, далее опция
height: 'auto', - отвечает за высоту модального окна, с ней все так же, как и с опцией длины, последняя опция
buttons: {"X":function()... - здесь интересует только часть "X" в кавычки указывается текст, который будет использован для кнопки "Закрыть", у меня это большая латинская буква X, она как крестик. Со скриптом вроде бы все, поехали дальше.
Далее в нужно место вставляем такой код (кнопка с содержимым модального окна):
<div id="DLE" title="http://dlefor.ru/" style="display:none;">
Текст Вашего блока.
</div>
<a onclick="ShowMyModal(); return false;">Click_ME :)</a>
И снова разберем, что же к чему...
Див, содержащий название блока, в данном случае
DLE - по сути и есть наше модальное окно, тут вы указываете
title="http://dlefor.ru/" - название вашего окна, и внутри дива вы уже вставляете содержимое. Дальше идет ссылка на модальное окно, тут она оформлена именно, как ссылка, но вообще можно использовать и
INPUT, и
BUTTON, главное чтоб они содержали:
onclick="ShowMyModal(); return false;"
Всё !!!