Модальные окна наоборот

Для реализации данного эффекта воспользуемся лайтбоксом fancyBox3

Делаем структуру страницы, подключаем скрипты и стили. Более подробное описание дано в комментариях в коде.

Сдвиг страницы сайта вправо:

HTML
CSS

<html>
<head>		
<title>Сдвиг страницы сайта вправо</title>
<link rel="stylesheet" href="jquery.fancybox.css">
<link rel="stylesheet" href="my.css">
</head>	
<body>		
	<div class="allpage">
		<p>Внутри блока allpage размещаем весь видимый контент сайта</p>
		<p><a data-fancybox href="image.jpg">Картинка</a></p>
		<p><a data-fancybox="images" href="image.jpg">Галерея</a></p>
		<p><a data-fancybox data-src="#hidden-content" href="#">Окно</a></p>
		<p><a data-fancybox href="youtube.video">Видео</a></p>	
	</div>				
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
	<script src="jquery.fancybox.js"></script>
	<script>
		$('[data-fancybox]').fancybox({
/* выключаем анимацию, чтобы информация за страницей появлялась без эффекта */
			animationEffect : "false", 
/* ставим продолжительность анимации равной продолжительности ухода страницы, 
чтобы информация за страницей не исчезла раньше времени */
			animationDuration : 600, 
/* перед закртиыем окна удаляем класс и возвращаем страницу */
			beforeClose : function() {
				$('body').removeClass('modalopen'); 
			}
		});
/* Перед открытием модального окна добавляем класс и убираем страницу */ 
		$('[data-fancybox]').click(function() {
			$('body').addClass('modalopen');  
		});		
	</script>	
</body>
</html>

<html>

<head>

<title>Сдвиг страницы сайта вправо</title>

</head>

<body>

<p>Внутри блока allpage размещаем весь видимый контент сайта</p>

<p><a data-fancybox href="image.jpg">Картинка</a></p>

<p><a data-fancybox="images" href="image.jpg">Галерея</a></p>

<p><a data-fancybox href="youtube.video">Видео</a></p>

</div>

$('[data-fancybox]').fancybox({

/* выключаем анимацию, чтобы информация за страницей появлялась без эффекта */

animationEffect : "false",

/* ставим продолжительность анимации равной продолжительности ухода страницы,

чтобы информация за страницей не исчезла раньше времени */

animationDuration : 600,

/* перед закртиыем окна удаляем класс и возвращаем страницу */

beforeClose : function() {

$('body').removeClass('modalopen');

}

});

/* Перед открытием модального окна добавляем класс и убираем страницу */

$('[data-fancybox]').click(function() {

$('body').addClass('modalopen');

});

</script>

</body>

</html>

html {
	height:100%; /* устанавливаем высоту в 100% для всей страницы  */
}
body {
	margin:0;
	padding:0;
	overflow:hidden; /* убираем прокрутку, чтобы она уезжала вместе со страницей */
	height:100%;
}			
.allpage {
	height:100%;
	overflow:auto;
	background:#FFF; /* устанавливаем цвет фона, чтобы не просвечивали модальные окна*/
	position:relative;
	z-index: 999999; /* устанавливаем перекрытие страницы больше, чем у модальных окон */
	transition: all 0.6s ease-in-out; /* Продолжительность ухода страницы */ 
	left:0;
}
.modalopen .allpage {
	left:100%; /* сдвигаем страницу вправо */
}

html {

height:100%; /* устанавливаем высоту в 100% для всей страницы */

}

body {

margin:0;

padding:0;

overflow:hidden; /* убираем прокрутку, чтобы она уезжала вместе со страницей */

height:100%;

}

.allpage {

height:100%;

overflow:auto;

background:#FFF; /* устанавливаем цвет фона, чтобы не просвечивали модальные окна*/

position:relative;

z-index: 999999; /* устанавливаем перекрытие страницы больше, чем у модальных окон */

transition: all 0.6s ease-in-out; /* Продолжительность ухода страницы */

left:0;

}

.modalopen .allpage {

left:100%; /* сдвигаем страницу вправо */

}

Посмотреть пример

Демо страница отличается от представленного выше кода. В ней добавлены стили сайта и небольшая корректировка стиля для fancyBox3.

<html>
<head>		
<title>Сдвиг страницы сайта вправо</title>
<link rel="stylesheet" href="jquery.fancybox.css">
<link rel="stylesheet" href="my.css">
</head>	
<body>		
	<div class="allpage">
		<p>Внутри блока allpage размещаем весь видимый контент сайта</p>
		<p><a data-fancybox href="image.jpg">Картинка</a></p>
		<p><a data-fancybox="images" href="image.jpg">Галерея</a></p>
		<p><a data-fancybox data-src="#hidden-content" href="#">Окно</a></p>
		<p><a data-fancybox href="youtube.video">Видео</a></p>	
	</div>				
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
	<script src="jquery.fancybox.js"></script>
	<script>
		$('[data-fancybox]').fancybox({
/* выключаем анимацию, чтобы информация за страницей появлялась без эффекта */
			animationEffect : "false", 
/* ставим продолжительность анимации равной продолжительности ухода страницы, 
чтобы информация за страницей не исчезла раньше времени */
			animationDuration : 600, 
/* перед закртиыем окна удаляем классы и возвращаем страницу */
			beforeClose : function() {
				$('body').removeClass('modalopen2').removeClass('modalopen');
			}
		});
/* перед открытием модального убираем страницу и ставим на задний план */ 
		$('[data-fancybox]').click(function() {
			$('body').addClass('modalopen').delay(600).queue(function(){
			$(this).addClass('modalopen2').dequeue();});
		});			
	</script>	
</body>
</html>

<html>

<head>

<title>Сдвиг страницы сайта вправо</title>

</head>

<body>

<p>Внутри блока allpage размещаем весь видимый контент сайта</p>

<p><a data-fancybox href="image.jpg">Картинка</a></p>

<p><a data-fancybox="images" href="image.jpg">Галерея</a></p>

<p><a data-fancybox href="youtube.video">Видео</a></p>

</div>

$('[data-fancybox]').fancybox({

/* выключаем анимацию, чтобы информация за страницей появлялась без эффекта */

animationEffect : "false",

/* ставим продолжительность анимации равной продолжительности ухода страницы,

чтобы информация за страницей не исчезла раньше времени */

animationDuration : 600,

/* перед закртиыем окна удаляем классы и возвращаем страницу */

beforeClose : function() {

$('body').removeClass('modalopen2').removeClass('modalopen');

}

});

/* перед открытием модального убираем страницу и ставим на задний план */

$('[data-fancybox]').click(function() {

$('body').addClass('modalopen').delay(600).queue(function(){

$(this).addClass('modalopen2').dequeue();});

});

</script>

</body>

</html>

html {
	height:100%; /* устанавливаем высоту в 100% для всей страницы  */
}
body {
	margin:0;
	padding:0;
	overflow:hidden; /* убираем прокрутку, чтобы она уезжала вместе со страницей */
	height:100%;
}			
.allpage {
	height:100%;
	overflow:auto;
	background:#FFF; /* устанавливаем цвет фона, чтобы не просвечивали модальные окна*/
	position:relative;
	z-index: 999999; /* устанавливаем перекрытие страницы больше, чем у модальных окон */
	transition: all 0.6s ease-in-out; /* Продолжительность ухода страницы */ 
}
.modalopen .allpage {
	opacity:0; 
	transform:scale(1.1);
}	
.modalopen2 .allpage {
	z-index:-1; 
}

html {

height:100%; /* устанавливаем высоту в 100% для всей страницы */

}

body {

margin:0;

padding:0;

overflow:hidden; /* убираем прокрутку, чтобы она уезжала вместе со страницей */

height:100%;

}

.allpage {

height:100%;

overflow:auto;

background:#FFF; /* устанавливаем цвет фона, чтобы не просвечивали модальные окна*/

position:relative;

z-index: 999999; /* устанавливаем перекрытие страницы больше, чем у модальных окон */

transition: all 0.6s ease-in-out; /* Продолжительность ухода страницы */

}

.modalopen .allpage {

opacity:0;

transform:scale(1.1);

}

.modalopen2 .allpage {

z-index:-1;

}

Посмотреть пример

Сдвиг страницы сайта вправо:

Увеличение и исчезание страницы:

Смотрите также:

Добавить комментарий: