Модальное окно голубого цвета с красивым эффектом
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>
Автор публикации: Загрузка
Загрузка
Добавлять комментарии могут только зарегистрированные пользователи.
Регистрация |
Вход
Это моя работа, которая велась давольно таки давно

Времени было мало, поэтому я скачал полностью все, что было и сделал архив

111 мегабайт? wtf? Что в архив напихали?
Левое меню это BLG. Возможны какие-то баги, но в целом все должно работать корректно!
?
/* Скрывает каперайт ucoz */
.banner_u {
opacity:0.2 ;
}
/* ----------------- */
opacity:0.1 ; это легальное скрытее $POWERED_BY$
ставим в ccs не ставте 0.0 тоже за банят 1.1 можно сам пользуюсь.
11:39
Ответов:
1603 Написал:
AdminSB Дата:
14.09.2022 19:37
Ответов:
23 Написал:
arman02151 Дата:
27.04.2021 00:01
Ответов:
4 Написал:
doc74 Дата:
17.02.2020 20:54
Ответов:
0 Написал:
Betme Дата:
11.01.2020 10:00
Ответов:
3 Написал:
vover6 Дата:
24.12.2019 13:07
Ответов:
14 Написал:
vover6 Дата:
07.03.2019 18:37
Ответов:
8 Написал:
lizbeti4ek Дата:
21.02.2019 21:33
Ответов:
2 Написал:
CbIPoK2513 Дата:
15.05.2018 17:25
Ответов:
0 Написал:
CbIPoK2513 Дата:
13.05.2018
Онлайн всего: 10
Гостей: 10
Пользователей: 0
Для проверки введите адрес сайта в форму ниже: