Затемнение фона сайта - 2
jQuery плагин для включения и выключения затемнения основного фона сайта с помощью переключателя.
by Andrey Dobrovoi
HTML
<div class="container">
<div class="main clearfix">
<div class="column-1">
<img src="http://www.online-hd.net/img/vykljuchit_svet.png" onclick="setCookie('onZatemnenie', 1,
365); eraseCookie('offZatemnenie');" id="onSvet" title="Выключить свет">
<img src="http://www.online-hd.net/img/vkljuchit_svet.png" onclick="setCookie('offZatemnenie', 1, 365); eraseCookie('onZatemnenie');" id="offSvet" title="Включить свет">
</div>
<div class="column-2">
<div id="onOff">
<div class="block">
<div class="video-responsive">
<iframe width="1280" height="720" src="//www.youtube.com/embed/mRrE8CFkkAg" frameborder="0" allowfullscreen></iframe>
</div>
</div>
</div>
</div>
</div>
</div>
CSS
*, *:after, *:before {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
body, html {
font-size: 100%;
padding: 0;
margin: 0;
}
.clearfix:before, .clearfix:after {
content: " ";
display: table;
}
.clearfix:after {
clear: both;
}
.main,
.container{
margin: 0 auto;
padding: 2em;
}
/* Основное содержание */
.main {
max-width: 59em;
}
.column-1 {
float: left;
width: 15%;
padding: 0 2em;
min-height: 150px;
position: relative;
}
.column-2 {
float: left;
width: 85%;
padding: 0 2em;
min-height: 300px;
position: relative;
}
/*Переключатель затемненя фона */
#zatemnenieSaita {
background: rgba(0,0,0,0.9);
z-index: 998;
width: 100%;
height: 100%;
position: fixed;
top: 0;
left: 0;
display: none;
}
#onOff {
position: relative;
z-index: 999;
}
#onSvet{
position: absolute;
top: 0px;
left: 10px;
z-index: 999;
cursor: pointer;
display: block;
}
#offSvet{
position: absolute;
top: 0px;
left: 10px;
z-index: 999;
cursor: pointer;
display: none;
}
#onOff {
position: relative;
z-index: 999;
}
/* Блок с содержанием */
.block {
background: #fff;
-moz-box-shadow: 0px 1px 3px #909090;
-webkit-box-shadow: 0px 1px 3px #909090;
box-shadow: 0px 1px 8px #909090;
border-radius: 4px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
padding: 10px;
width: 100%;
overflow: hidden;
}
/* Адаптивное видео */
.video-responsive {
position: relative;
padding-bottom: 56.25%;
height: 0;
overflow:hidden;
}
.video-responsive iframe,
.video-responsive object,
.video-responsive embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
@media screen and (max-width: 46.0625em) {
.column-2 {
width: 100%;
min-width: auto;
min-height: auto;
padding: 1em;
}
}
JavaScript
// by Вовчи
// for webo4ka.ru
// Создание 8.06.2012
// Удаление строк запрещено
function setCookie(name, value, days) {
if (days) {
var date = new Date();
date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
var expires = "; expires=" + date.toGMTString();
}
else var expires = "";
document.cookie = name + "=" + value + expires + "; path=/";
}
function getCookie(name) {
var nameEQ = name + "=";
var ca = document.cookie.split(';');
for (var i = 0; i < ca.length; i++) {
var c = ca[i];
while (c.charAt(0) == ' ') c = c.substring(1, c.length);
if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length, c.length);
}
return null;
}
function eraseCookie(name) {
setCookie(name, "", -1);
};
$("body").append('<div id="zatemnenieSaita"></div>');
if(getCookie('onZatemnenieWebo4kaRu')) {
$(document).ready(function(){
$('#zatemnenieSaita').fadeIn('100');
$('#onSvet').hide();
$('#offSvet').show();
$("#offSvet").click(function(){
$('#offSvet').hide();
$('#onSvet').show();
});
});
}
if(getCookie('offZatemnenie')) {
$(document).ready(function(){
$('#offSvet').hide();
$('#onSvet').show();
$("#onSvet").click(function(){
$('#zatemnenieSaita').fadeIn('100');
$('#onSvet').hide();
$('#offSvet').show();
});
$("#offSvet").click(function(){
$('#zatemnenieSaita').fadeOut('100');
$('#offSvet').hide();
$('#onSvet').show();
});
});
}
else {
$(document).ready(function(){
$("#onSvet").click(function(){
$('#zatemnenieSaita').fadeIn('100');
$('#onSvet').hide();
$('#offSvet').show();
});
$("#offSvet").click(function(){
$('#zatemnenieSaita').fadeOut('100');
$('#offSvet').hide();
$('#onSvet').show();
});
});
}