Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 29.12.2016, 16:34
Новичок на форуме
Отправить личное сообщение для REDiRECT72 Посмотреть профиль Найти все сообщения от REDiRECT72
 
Регистрация: 29.12.2016
Сообщений: 5

Модальное окно и его содержимое
Приветствую, форумчане! Знания языка 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;
	}
});

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



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Bootstrap модальное окно igor.3dviz Общие вопросы Javascript 1 09.02.2014 13:27
Как передать переменную в модальное окно sinsir jQuery 24 20.06.2013 16:59
Модальное диалоговое окно hrundel jQuery 1 12.10.2012 18:48
Как можно перемещать модальное окно? izcian Общие вопросы Javascript 2 06.10.2012 19:20
Подскажите как открыть модальное окно "fancybox" из скрипта js dgabets jQuery 1 18.02.2012 18:05