"Выключение света" с помощью jQuery
ForuCoz.Сom - Портал где есть все для ucoz, у нас всегда, самые нужные и интересные php и js скрипты для ucoz и шаблоны для ucoz, огромный выбор иконок и графики для Photoshop.
Logical-Portal.ru Информационно развлекательный портал.
Вы просматриваете материал "Выключение света" с помощью jQuery. Думаю вам понравился материал "Выключение света" с помощью jQuery и вы воспользуетесь им! :)
Концепция
Суть урока: при нажатии на ссылку слой (div) размером с страницу становится видимым и накладывается на содержание сайта. Над этим слоем находится всплывающее окно. При закрытии все становится на свои места.
Шаг №1 - HTML
Code
<body>
<!--The overlay and message box-->
<div id="fuzz">
<div class="msgbox">
<a class="close" href="#" ><img src="close.jpg"/></a>
</div>
</div>
<!--The content to be hidden-->
<div id="content">
<a class="alert" href="#" >Alert Me!</a>
</div>
</body>
Когда Вы будете вставлять это на свой сайт, все что от Вас потребуется - это вставить свой рисунок (можете не менять, а оставить тот, который в демо) для верхнего слоя и изменить содержание всплывающего окна.
Шаг №2 - CSS
Давайте добавим немного стилей:
Code
/*Стили для верхнего слоя и всплывающего окна*/
#fuzz{ position:absolute; top:0; left:0; width:100%; z-index:100; background: url('fuzz.gif'); display:none; text-align:left; }
/*Позиционирование окна в самом центре*/
.msgbox{ position:absolute; width:300px; height:200px; z-index:200; border:5px solid #222; background: #FFF; top: 50%; left: 50%; margin-top: -100px; margin-left: -150px; }
.msgbox img {border:none; margin:5px;}
/*"X" (крестик) в правом верхнем углу окна*/
.close{ top:0px; float:right; }
#fuzz{ position:absolute; top:0; left:0; width:100%; z-index:100; background: url('fuzz.gif'); display:none; text-align:left; }
/*Позиционирование окна в самом центре*/
.msgbox{ position:absolute; width:300px; height:200px; z-index:200; border:5px solid #222; background: #FFF; top: 50%; left: 50%; margin-top: -100px; margin-left: -150px; }
.msgbox img {border:none; margin:5px;}
/*"X" (крестик) в правом верхнем углу окна*/
.close{ top:0px; float:right; }
Можете менять фоновый рисунок #fuzz для изменения эффекта затемнения.
Шаг №3 - jQuery
В коде находятся комментарии:
Code
$(document).ready(function(){
//Подстраивает высоту слоя наложения, чтобы полностью окно было заполено при нажатии на ссылку
$("#fuzz").css("height", $(document).height());
//При нажатии на ссылку запускается процес
$(".alert").click(function(){
$("#fuzz").fadeIn();
return false;
});
//При закрытии окна - все возвращается на свои места
$(".close").click(function(){
$("#fuzz").fadeOut();
return false;
});
});
//Данные строки следят за правильным отображением, если даже пользователь изменил размер окна браузера
$(window).bind("resize", function(){
$("#fuzz").css("height", $(window).height());
});
//Подстраивает высоту слоя наложения, чтобы полностью окно было заполено при нажатии на ссылку
$("#fuzz").css("height", $(document).height());
//При нажатии на ссылку запускается процес
$(".alert").click(function(){
$("#fuzz").fadeIn();
return false;
});
//При закрытии окна - все возвращается на свои места
$(".close").click(function(){
$("#fuzz").fadeOut();
return false;
});
});
//Данные строки следят за правильным отображением, если даже пользователь изменил размер окна браузера
$(window).bind("resize", function(){
$("#fuzz").css("height", $(window).height());
});
Вот и все готово. Немного воображения и используя данный пример можно придумать интересное применение на любом сайте.
Например, заменив фоновую картинку, можно достигнуть такого эффекта
| Всего комментариев: 0 | |