Добрый день, скажу сразу, я УЧЮСЬ!
Написал некую белеберду, для модальных окон, принцип работы как в ФансиБокс
Всё работает.
Очень прошу прокоментировать творение, посоветуйте как грамотнее написать.
Или всё таки моё творение безнадёжное, и лучше использовать ФансиБокс ?
Пример ссылки:
<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();}) // Плавно удаляю Оверлей и модалку
});
});
}