Javascript-форум (https://javascript.ru/forum/)
-   Элементы интерфейса (https://javascript.ru/forum/dom-window/)
-   -   Модальное окно и его содержимое (https://javascript.ru/forum/dom-window/66646-modalnoe-okno-i-ego-soderzhimoe.html)

REDiRECT72 29.12.2016 16:34

Модальное окно и его содержимое
 
Приветствую, форумчане! :) Знания языка JS у меня минимальные, могу лишь иногда интуитивно разбираться в коде, но помогает это редко :) Надеюсь, что Вы мне поможете решить возникшую проблему :)
Суть проблемы:
Есть модальное окно с красивым анимированным открытием (взято на просторах интернета), в нём находится фрейм левой страницы с весомым скриптом, тут проблем в принципе нет, всё работает :) Но скрипт с фрейма жрет много ресурсов. Проблема в том, что фрейм постоянно подгружен и при загрузке основной страницы сразу начинает работать.
Можно ли как то поправить скрипт модального окна, чтобы его содержимое подгружалось только при открытии самого окна и выгружалось при закрытии? Код JS прилагаю ниже, по необходимости могу скинуть CSS и HTML.
jQuery(document).ready(function($){
	//cache some jQuery objects
	var modalTrigger = $('.cd-modal-trigger'),
		transitionLayer = $('.cd-transition-layer'),
		transitionBackground = transitionLayer.children(),
		modalWindow = $('.cd-modal');

	var frameProportion = 1.78, //png frame aspect ratio
		frames = transitionLayer.data('frame'), //number of png frames
		resize = false;

	//set transitionBackground dimentions
	setLayerDimensions();
	$(window).on('resize', function(){
		if( !resize ) {
			resize = true;
			(!window.requestAnimationFrame) ? setTimeout(setLayerDimensions, 300) : window.requestAnimationFrame(setLayerDimensions);
		}
	});

	//open modal window
	modalTrigger.on('click', function(event){	
		event.preventDefault();
		var modalId = $(event.target).attr('href');
		transitionLayer.addClass('visible opening');
		var delay = ( $('.no-cssanimations').length > 0 ) ? 0 : 800;
		setTimeout(function(){
			modalWindow.filter(modalId).addClass('visible');
			transitionLayer.removeClass('opening');
		}, delay);
	});

	//close modal window
	modalWindow.on('click', '.modal-close', function(event){
		event.preventDefault();
		transitionLayer.addClass('closing');
		modalWindow.removeClass('visible');
		transitionBackground.one('webkitAnimationEnd oanimationend msAnimationEnd animationend', function(){
			transitionLayer.removeClass('closing opening visible');
			transitionBackground.off('webkitAnimationEnd oanimationend msAnimationEnd animationend');
		});
	});

	function setLayerDimensions() {
		var windowWidth = $(window).width(),
			windowHeight = $(window).height(),
			layerHeight, layerWidth;

		if( windowWidth/windowHeight > frameProportion ) {
			layerWidth = windowWidth;
			layerHeight = layerWidth/frameProportion;
		} else {
			layerHeight = windowHeight*1.2;
			layerWidth = layerHeight*frameProportion;
		}

		transitionBackground.css({
			'width': layerWidth*frames+'px',
			'height': layerHeight+'px',
		});

		resize = false;
	}
});

Заранее благодарю за помощь! И простите мне мою наглость, редко обращаюсь на форумы, но решить проблему нужно быстро, а знаний недостаточно :)


Часовой пояс GMT +3, время: 16:37.