Всплывающие окна jQueryВсплывающее окошко на 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 :)" перед вами будет модальное окошко, как на скриншоте. Подробно от dle-templates: * Открываете 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://dle-templates.info/" style="display:none;"> Текст Вашего блока. </div> <a onclick="ShowMyModal(); return false;">Click_ME :)</a> И снова разберем, что же к чему... Див, содержащий название блока, в данном случае DLE - по сути и есть наше модальное окно, тут вы указываете title="http://dle-templates.info/" - название вашего окна, и внутри дива вы уже вставляете содержимое. Дальше идет ссылка на модальное окно, тут она оформлена именно, как ссылка, но вообще можно использовать и INPUT, и BUTTON, главное чтоб они содержали: onclick="ShowMyModal(); return false;" Вроде бы рассказал, что хотел. Удачи wink
Комментарии к статьеЕсли Вам понравилась эта статья или не понравилась напишите об этом в комментариях
Информация
Посетители, находящиеся в группе Гости, не могут оставлять комментарии к данной публикации. |