чтение rss ленты

Nulls.su

Здесь обезаельно что то появиться 8)

Всплывающие окна jQuery

Всплывающие окна 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
 
Уважаемый посетитель, Вы зашли на сайт как незарегистрированный пользователь
Мы рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем
Другие новости по теме:
 (голосов: 0)
  • Просмотров: 1494
  • Комментариев: 0

Комментарии к статье

Если Вам понравилась эта статья или не понравилась напишите об этом в комментариях
Информация
Посетители, находящиеся в группе Гости, не могут оставлять комментарии к данной публикации.
Переместиться наверх

nulls.su

Внимание, вся информация размещена на сайте пользователями, поэтому владельцы сайта не несут ответственности за правдивость, валидность, степень контрафактности. Если вы считаете что информация размещена неправомерно, сообщите пожалуйста в службу поддержки и информация будет незамедлительно удалена. Вся информация размещена на основании соглашения
Шаблон разработан студией CENTROARTS