[ Новые сообщения · Участники · Правила форума · Поиск · RSS ]
Рекламный блок Форума
Реклама
  • Страница 1 из 1
  • 1
Архив - только для чтения
Всё для веб мастера. Скрипты для сайта uCoz » Скрипты для ucoz » Другие скрипты » Создание простых модальных окон с помощью jQuery
Создание простых модальных окон с помощью jQuery
PDA Дата: Пятница, 30.09.2011, 18:24 | Сообщение # 1
Новичёк в ucoz
Сообщений: 52
Награды: 0
Репутация: 284
"Создание простых модальных окон с помощью jQuery"!

Панель Управления - Страница Сайта:

Установка

между:





Code
<script type="text/javascript" src="http://vk-online.do.am/test_portal/webo4ka_ru/4/lekus.js"></script>
<link rel="stylesheet" type="text/css" href="http://vk-online.do.am/test_portal/webo4ka_ru/4/lekus.css" />
   <script>
$(document).ready(function() {   
   $('a[name=modal]').click(function(e) {
   e.preventDefault();
   var id = $(this).attr('href');
     
   var maskHeight = $(document).height();
   var maskWidth = $(window).width();
     
   $('#mask').css({'width':maskWidth,'height':maskHeight});
     
   $('#mask').fadeIn(1000);   
   $('#mask').fadeTo("slow",0.8);   
     
   var winH = $(window).height();
   var winW = $(window).width();
     
   $(id).css('top', winH/2-$(id).height()/2);
   $(id).css('left', winW/2-$(id).width()/2);
     
   $(id).fadeIn(2000);   
     
   });
     
   $('.window .close').click(function (e) {
e.preventDefault();
   $('#mask, .window').hide();
   });   
     
   $('#mask').click(function () {
   $(this).hide();
   $('.window').hide();
   });   
     
   });   
</script>

На этой же странице после:





ставим:
Code
<div id="boxes">   
<div id="dialog" class="window">   
Простое модальное окно |   
   <a href="#"class="close"/>Закрыть его</a>
   </div>
     
   <!-- НАчало формы логина -->   
   <div id="dialog1" class="window">
   <div class="d-header">
   <input type="text" value="username" onclick="this.value=''"/><br/>
   <input type="password" value="Password" onclick="this.value=''"/>   
   </div>
   <div class="d-blank"></div>
   <div class="d-login"><input type="image" alt="Login" title="Login" src="http://vk-online.do.am/test_portal/webo4ka_ru/4/login-button.png"/></div>   
</div>
   <!-- конец -->   
     
<!-- Начало красивого стикера -->
   <div id="dialog2" class="window">
   Вот так все красиво!! <b>webo4ka.ru</b> - всегда только лучшая информация<br/><br/>
   <input type="button" value="НУ НАЖМИТЕ МЕНЯ!!!" class="close"/>
   </div>
   <!-- конец -->   
     
<!-- Макска, которая затемняет весь экран -->
   <div id="mask"></div>


Для вывода окна вставте сылку влюбое место вашего сайта ...
Code
<ul>
<li><a href="#dialog" name="modal">Простое модальное окно</a></li>
<li><a href="#dialog1" name="modal">Форма для логина</a></li>
<li><a href="#dialog2" name="modal">Форма для логина</a></li>
</ul>

Пользуйтесь наздоровье....
Демо: Жми меня


ляля
Всё для веб мастера. Скрипты для сайта uCoz » Скрипты для ucoz » Другие скрипты » Создание простых модальных окон с помощью jQuery
  • Страница 1 из 1
  • 1
Поиск:

 
Ваш логин: Ваш пароль: