Скрипты и шаблоны для uCoz - 3aKa4Ka
Каталог файлов | Иконки групп | Видео уроки | Статьи | PSD исходники | SEO софт/программы | SEO новости
Скрипты для uCoz Шаблоны для uCoz
Меню сайта
Новое на форуме ↓
Новые комментарии
Кто на сайте
Онлайн всего: 1
Гостей: 1
Пользователей: 0

Сайт сегодня посетили:

Модальное окно голубого цвета с красивым эффектом

Главная » Скрипты для uCoz » Модальное окно голубого цвета с красивым эффектом
Модальное окно голубого цвета с красивым эффектом для uCoz

Установка:
Это вставляем в <head>:
Code
<script type="text/javascript" src="http://rucoz.com/img/other/okno/js/jquery-1.3.2.min.js"></script>
<script>

$(document).ready(function() {  

  //select all the a tag with name equal to modal
  $('a[name=modal]').click(function(e) {
  //Cancel the link behavior
  e.preventDefault();
  //Get the A tag
  var id = $(this).attr('href');
   
  //Get the screen height and width
  var maskHeight = $(document).height();
  var maskWidth = $(window).width();
   
  //Set heigth and width to mask to fill up the whole screen
  $('#mask').css({'width':maskWidth,'height':maskHeight});
   
  //transition effect  
  $('#mask').fadeIn(1000);  
  $('#mask').fadeTo("slow",0.8);  
   
  //Get the window height and width
  var winH = $(window).height();
  var winW = $(window).width();
   
  //Set the popup window to center
  $(id).css('top', winH/2-$(id).height()/2);
  $(id).css('left', winW/2-$(id).width()/2);
   
  //transition effect
  $(id).fadeIn(2000);  
   
  });
   
  //if close button is clicked
  $('.window .close').click(function (e) {
  //Cancel the link behavior
  e.preventDefault();
  $('#mask, .window').hide();
  });  
   
  //if mask is clicked
  $('#mask').click(function () {
  $(this).hide();
  $('.window').hide();
  });  
   
});

</script>

Это вставляем в ваше CSS:
Code
#mask {position:absolute;left:0;top:0;z-index:9000;background-color:#000;display:none;}
#boxes .window {position:absolute;left:0;top:0;width:440px;height:240px;display:none;z-index:9999;}
#boxes #dialog {width:375px; height:243px;padding-right:12px;padding-left:10px;padding-bottom:10px;background:url(http://rucoz.com/img/other/okno/images/fonsupport.png) no-repeat 0 0 transparent;}
#boxes #dialog1 {width:375px; height:203px;}
#dialog1 .d-header {background:url(http://rucoz.com/img/other/okno/images/login-header.png) no-repeat 0 0 transparent; width:375px; height:150px;}
#dialog1 .d-header input {position:relative;top:60px;left:100px;border:3px solid #cccccc;height:22px;width:200px;font-size:15px;}

В любое место в <body>
Code
<div id="boxes">  
<div id="dialog" class="window">  
<p align="right"><a class="close" href="#"><img src="http://rucoz.com/img/other/okno/images/close.gif"></a></p>
Ваш текст. Профиль, реквизиты или что то еще.<br>
<a href="http://rucoz.com">Скрипты и шаблоны для uCoz</a><br> rucoz.com
</div></div>  
<div id="mask"></div>

Это ссылка для открытия окна, вставляем там где хотим видеть ссылку:
Code
<a href="#dialog" name="modal">RuCoz.com</a>

Вот и все готово

Просмотров: 922 | Комментариев: 1 | Опубликовал: DizeL | Дата: 23.10.2010

 23.07.2010   

 

 Измененная линия &l... 

 21.05.2010   

 

 Создание фирменной ... 

 01.05.2010   

 

 Юзеры, которые прос... 

 10.10.2009   

 

 Доступ запрещен 

 20.10.2010   

 

 Новый мини-профиль 


Всего комментариев: 1
 
+1 1 DizeL 23.10.2010 23:59:16 Выглядит очень красиво, в него я хотел сделать профиль, но подумал и не стал. Пусть пользователь сам решает Цитировать | Редактировать | Удалить
 

3aKa4Ka.at.ua - портал веб мастеров

Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]
© 3aka4ka.at.ua 2008 - 2024г. Все материалы размещенные на сайте принадлежат их владельцам и предоставляются исключительно в ознакомительных целях. Администрация ответственности за содержание материала не несет и убытки не возмещает.