Время:
Новых сообщений: Нет
Вы на форуме дней
Ваша группа: Гость
Ваш IP: 3.149.239.79
Logical-Portal — молодежный портал со своей изюминкой, каждый сможет найти что-то интересное и полезное для себя, например наш форум общения с которым вам обязательно нужно ознакомиться.
  • Страница 1 из 1
  • 1
Модальное окно голубого цвета с красивым эффектом
Сообщение оставлено 11.02.2011 в 10:41:23 | Сообщение #1

Установка:

Это вставляем в <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>
 
 
   
Сообщение оставлено 11.02.2011 в 14:03:58 | Сообщение #2
чё это за чушь?
 
Рерайт, копирайт, продажа стим аккаунтов.
Связь со мной Skype: axiles281 and ICQ: 609881443
 
   
  • Страница 1 из 1
  • 1
Поиск:
 
Графика от: Megas, GraFOS | Дизайн сверстал E.A.
Хостинг от uCoz
Яндекс.Метрика