Как сделать единое модальное окно?

Question

[valgerofficial]

Привет ребята! Вот есть 3 блока.. у каждого блока одна и та же кнопка. И есть модальное окно которое скрывает содержимое. Но у каждого из блоков содержимое разное. Как сделать один единый скрипт.. который будет открывать разные модальные окна?

<a href="#" id="service-price">Заказать</a>

<div id="service-modal"> 
      			<!-- <span id="modal_close">X</span> -->
      			<h1><span>П</span>роектирование</h1>
			</div>
			<div id="service-overlay"></div>

$('a#service-price').click( function(event){ 
		event.preventDefault();
		$('#service-overlay').fadeIn(400,
		 	function(){
				$('#service-modal') 
					.css('display', 'block') 
					.animate({opacity: 1, top: '5%'}, 200); 
		});
	});
	$('.service-modal-close, #service-overlay').click( function(){ 
		$('#service-modal')
			.animate({opacity: 0, top: '45%'}, 200, 
				function(){ 
					$(this).css('display', 'none'); 
					$('#service-overlay').fadeOut(400); 
				}
			);
	});

Answer 1

[Андрей Саврасов]

Писать в скрытом классе нужный html и пробрасывать его в это окно.
Пример

<div class="modalText" style="display: none;">Любой текст</div>

$('a#service-price').click( function(event){ 
    var getHtml = $(this).next(".modalText").html();

    event.preventDefault();
    $('#service-overlay').fadeIn(400,
     	function(){

$('#service-modal').html(getHtml);
        $('#service-modal') 
          .css('display', 'block') 
          .animate({opacity: 1, top: '5%'}, 200); 


    });
  });

Answer 2

[Антон Иванов]

Подгружать нужный контент с помощью AJAX при открытии модального окна.