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

920
6 из 10
Проголосовало: 2




Установка:

Это вставляем в <head>:

Code
<script type="text/javascript" src="http://webo4ka.ru/Ucoz2/modalnoe_okno_golubogo_cveta.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://webo4ka.ru/Ucoz2/modalnoe_okno_golubogo_cveta1.png) no-repeat 0 0 transparent;}  
#boxes #dialog1 {width:375px; height:203px;}  
#dialog1 .d-header {background: #000000; 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://webo4ka.ru/Ucoz2/modalnoe_okno_golubogo_cveta_close.gif"></a></p>  
Тут что-то ваше!<br>  
<a href="http://webo4ka.ru">Лучший бесполезняк на webo4ka.ru</a>
</div></div>  
<div id="mask"></div>

Это ссылка для открытия окна, вставляем там где хотим видеть ссылку:

Code
<a href="#dialog" name="modal">webo4ka.ru</a>
Автор публикации: Загрузка
Загрузка
Вовчик, это его n материал
  • Оставить первым комментарий:
Добавлять комментарии могут только зарегистрированные пользователи.
Регистрация | Вход
Меню сайта
Категории
Для помощи создания сайта uCoz 25
Скрипты и модификации для Ucoz 2118
Шаблоны форумов Ucoz 28
Шаблоны сайтов Ucoz 431
Авторство Webo4ki 309
php скрипты для ucoz 57
Графика для uCoz 40
Мини-чат
Последние комментарии
  • Marishka написал:
  • Радио не стоит на месте новая версия вам 1.5:
    Что нового:
    1. Media Session - позволит вам переключать из бара браузера радио, а также на блоке экрана.
    2. Новые радиостанции.
    3. Новый API код.

    Демо: fiddle
    Реальная полная версия: woobl
  • Marishka написал:
  • Можете добавить свои input поля, но сохраняйте их порядок в html для правильного сохранения и вывода.
  • Marishka написал:
  • Новая версия 1.3 (+6 новых станций):
    Установка:
    Демо: Перейти
  • Marishka написал:
  • Доп 8 станций:
    Код
    <div class="mSt"><p>Tropical</p><div data="2/trop_64">64</div><br><div data="2/trop_128">128</div><br><div data="2/trop_320">320</div></div>  
      <div class="mSt"><p>Нафталин FM</p><div data="2/naft_64">64</div><br><div data="2/naft_128">128</div><br><div data="2/naft_320">320</div></div>  
      <div class="mSt"><p>Rave FM</p><div data="2/rave_64">64</div><br><div data="2/rave_128">128</div><br><div data="2/rave_320">320</div></div>  
      <div class="mSt"><p>Gold</p><div data="2/gold_64">64</div><br><div data="2/gold_128">128</div><br><div data="2/gold_320">320</div></div>  
      <div class="mSt"><p>GOA/PSY</p><div data="2/goa_64">64</div><br><div data="2/goa_128">128</div><br><div data="2/goa_320">320</div></div>  
      <div class="mSt"><p>Minimal/Tech</p><div data="2/mini_64">64</div><br><div data="2/mini_128">128</div><br><div data="2/mini_320">320</div></div>  
      <div class="mSt"><p>House</p><div data="2/fut_64">64</div><br><div data="2/fut_128">128</div><br><div data="2/fut_320">320</div></div>  
      <div class="mSt"><p>Megamix</p><div data="2/mix_64">64</div><br><div data="2/mix_128">128</div><br><div data="2/mix_320">320</div></div>


    Fix работы радио:
    Находим: if(radUrl=="tm" || radUrl=="ps" || radUrl=="teo" || radUrl=="dc")
    Меняем на: if (radUrl == "tm" || radUrl == "ps" || radUrl == "teo" || radUrl == "dc" || radUrl == "gop")
  • CbIPoK2513 написал:
  • Мой вариант выдаёт аватарку картинкой, а не текстом.
    Последние темы
    Опрос
    470
    А
    Р
    Оцените новый дизай:)
    Статистика
    Анализ интернет сайта
    0
    онлайн
    0
    наших
    0
    чужих
    Онлайн всего: 2
    Гостей: 2
    Пользователей: 0
    0
    Сегодня были
    Топ пользователей: