Создаешь структуру окна в js. Затем создаешь (можно в js, можно в бд, можно json), информацию по окнам(заголовок, текст, форма и т.д, для каждого своё). Затем по какому-либо параметру на кнопке вызывающей окно, передаешь в скрипт создания окна эту информацию.
Например куски кода:
<a href="/23_this.page.html#!flat_21" data-popup="apartment">3-комн.</a>
Ф-ция вызова окна:
var popup = new function() {
this.init = function(ajaxCallback, link, argument) {
if(!popupOpen) {
popup.open(ajaxCallback, link, argument);
} else {
popup.change(ajaxCallback, link, argument);
}
};
this.open = function(ajaxCallback, link, argument) {
$body = $('body');
var scroll = (navigator.userAgent.search(/MSIE/) != -1) ? document.documentElement.scrollTop : window.scrollY;
var html = '<div class="b-popup"><div class="b-popup-box"><div class="h-loaded-content"></div><span class="close">' + msg.close + '</span></div><div class="h-mask"></div></div>';
$body.append(html);
$('.b-popup').fadeIn(400);
$('.h-mask').fadeTo(400, 0.7);
$body.addClass('h-popup-on');
$body.on('click', '.close, .h-mask, .b-popup .hide', function(){
popup.close(scroll);
});
ajaxCallback(link, argument);
$('.h-wrapper').css({ marginTop: -scroll });
document.documentElement.scrollTop = 0;
document.body.scrollTop = 0;
popupOpen = true;
};
this.change = function(ajaxCallback, link, argument) {
$('.b-popup-box').removeClass('loaded');
if(argument) {
$('.h-loaded-content').empty();
}
ajaxCallback(link, argument);
};
this.close = function(scroll) {
$('.b-popup').fadeOut(400, function(){
$(this).remove();
$('.h-wrapper').css({ marginTop: 0 });
$('body').removeClass('h-popup-on');
document.documentElement.scrollTop = 0;
document.body.scrollTop = 0;
window.scrollBy(0,scroll);
popupOpen = false;
orderForm = false;
});
};
this.floatHeader = function() {
var $container = $('.h-loaded-content');
$container.prepend('<div class="b-popup-header"><span class="close">' + msg.close + '</span></div>');
$container.find('header').clone().appendTo('.b-popup-header');
$('.b-popup-header').append('<table></table>');
$container.find('table tr:first').clone().appendTo('.b-popup-header table');
$('.b-popup-header table').append('<tr><td><a>№8</a></td><td>забронирована</td><td>1</td><td>1</td><td><span class="red">3 050 000 руб</span> / 2 980 000 руб </td></tr>');
$(window).scroll(function(){
if(window.scrollY > 100) {
$('.b-popup-header').show();
} else {
$('.b-popup-header').hide();
}
})
};
};
Инициализация окна:
this.apartments = function() {
popupOpen = false;
orderForm = false;
$('body').on('click', '[data-popup]', function(){
var url = '/plain/json/' + $(this).attr('href').split('flat_')[1] + '.json';
switch($(this).data('popup')) {
case 'apartment':
popup.init(site.apartmentInfo, url, true);
break;
case 'reserve':
if (!orderForm) {
popup.init(site.apartmentForm, $(this).attr('href'), false);
}
break;
case 'subscribe':
if (!orderForm) {
popup.init(site.subscribe, $(this).attr('href'), false);
}
break;
case 'plan':
popup.init(site.apartmentPlan, $(this).attr('href'), true);
break;
case 'image':
popup.init(site.image, $(this).attr('href'), true);
break;
}
return false;
});
};
Генерация контента окна из json :
this.apartmentForm = function(link) {
$.ajax({
type: 'get',
url: link,
dataType: 'html',
success: function(data){
$('.b-popup-box').addClass('loaded');
$('.b-popup-box [data-popup="reserve"]').addClass('disabled');
$('.b-apartment_details_params').prepend('<tr class="image"><td colspan="2"><img src="' + $('.b-apartment_details_plan img').attr('src') + '" alt="" /></td></tr>');
$('.b-apartment_details .grid_3').append('<p class="b-apartment_details_notice">Вы можете оставить заявку, указав интересующую вас квартиру и удобные условия оплаты.</p>');
$('.clear + .grid_12').remove();
$('.b-apartment_details .grid_9').empty().append(data);
$('.b-popup-box .h-feed-form form').prepend('<input type="hidden" name="data[new][title]" value="' + $('.h-loaded-content h1').text() + '" />');
// Form
site.forms('input[type="checkbox"], input[type="radio"], select');
site.validate('[data-validate]');
orderForm = true;
}
});
};
К сожалению нет времени объяснять подробнее, и пример прям с живого проекта.
