Показать сообщение отдельно
  #1 (permalink)  
Старый 11.04.2015, 21:36
Интересующийся
Отправить личное сообщение для avantyrist Посмотреть профиль Найти все сообщения от avantyrist
 
Регистрация: 05.02.2015
Сообщений: 18

Самописное модальное окно
Добрый день, скажу сразу, я УЧЮСЬ!
Написал некую белеберду, для модальных окон, принцип работы как в ФансиБокс
Всё работает.
Очень прошу прокоментировать творение, посоветуйте как грамотнее написать.
Или всё таки моё творение безнадёжное, и лучше использовать ФансиБокс ?


Пример ссылки:
<a class="modal_link" rel="nofollow" href="#compare_content">Подробнее...</a>
в Ссылке указывается ключевой класс "modal_link" и href="#АйдишкаКонтейнера который должен стать модалкой"

Пример контейнера:
<div id="compare_content" class="dnone">
Тут содержимое,которое должно стать модальным окном, изначально скрытое ДисплейНоне
</div>


//  <!--- Модальные ОКНА ЧЕРЕЗ ССЫЛКИ  --->
function initModalLink(){
var ajax_conteiner=jQuery('#ajax_conteiner'),	// определил главный контейнер куда помещается содержимое
	modal_link=jQuery('a.modal_link');	// определил клас ссылок которые работают как МодальноеОкно

modal_link.live('click',function(){
event.preventDefault();
var link=jQuery(this).attr('href').split('#')[1],	// Определяю ссылку, для того чтобы знать к какому Контейнеру обращался скрипт
	modal_title=jQuery(this).attr('title'),
	container=jQuery("#"+link+"").html(),	// Получаю содержимое контейнера
	close='<div class="close_modal"></div>',	// Кнопка закрытия МодалОкна
	overlay_b='<div id="overlay_black"></div>',	//Оверлей
	modal_box="<div id="+link+" class='modal'>"+container+"</div>",	 //Создаю контейнер с КСС стилистикой модалки и помещаю в него содержимое
	scrol = jQuery(document).scrollTop(),				 
	wind_hm = jQuery(window).height() ;
jQuery("#"+link+"").attr("id","modal_placeholder").html('');	// содержимое старого контейнера удаляю, и меняю его айдишник
	
ajax_conteiner.append(modal_box,overlay_b).find("#"+link+"").append(close);	//Вставляю содержимое Модалки в главный контейнер

var	box_hm=ajax_conteiner.find("#"+link+"").height(),	//Расчёты КСС 
	box_wm=ajax_conteiner.find("#"+link+"").width()/2,
	css_top=(wind_hm - box_hm)/2+scrol;
if(css_top < "0"){var css_top =scrol+50;}
ajax_conteiner.find("#"+link+"").css({"top":css_top, "margin-left":-box_wm}).addClass('show');	// Добавление КСС стилистики

jQuery(".close_modal, #overlay_black").click(function(){	//Закрытие Модального Окна
var box_ajax_conteiner=ajax_conteiner.find("#"+link+"").html();	//Получаю содержимое Модального Окна
jQuery('#modal_placeholder').html(box_ajax_conteiner).attr("id",""+link+"").find('.close_modal').remove();	//Вставляю содержимое на старое место и возвращаю старый айдишник и удаляю кнопку "Закрыть"
jQuery("#overlay_black, #ajax_conteiner .modal").fadeOut(200, function(){ jQuery(this).remove();})	// Плавно удаляю Оверлей и модалку
});	
});
}

Последний раз редактировалось avantyrist, 11.04.2015 в 21:53.
Ответить с цитированием