모달팝업 질문입니다.

  ​

회사 덕에 잘 하지도 못하는 코딩으로 골머리썩는 신입 웹디자이너입니다.

어떤 컨텐츠의 상세페이지를 모달 페이지로 구상 중입니다. 

위의 사진처럼 상세설명은 통이미지로 넣고  모달창내부의 부가적인 내용은 제어가 가능해야 합니다만.

물론 방법을 알고 있기는 합니다.

다음이 제가 알고 있는 소스코드입니다.

ex)

[code]

<h1>modal 만들기</h1>

<ul id="modalList">

<li><a href="#"><img src="photo1_thum.jpg" width="140" height="105" alt="샹드리에" /></a></li>

<li><a href="#"><img src="photo2_thum.jpg" width="140" height="105" alt="장미" /></a></li>

<li><a href="#"><img src="photo3_thum.jpg" width="140" height="105" alt="바다" /></a></li>

<li><a href="#"><img src="photo4_thum.jpg" width="140" height="105" alt="종" /></a></li>

</ul>

<div id="modal">

<!-- <div id="grayLayer"></div> 스크립트에서 body 태그에 append -->

<!-- 실제 클릭하면 보여질 내용을 직접작성하고 스타일에서 display:none -->

<div class="modal">

<a href="#" class="close_btn">close</a>

<h1>modla html 구성하기 1</h1> 

<img src="images/test1.jpg" width="850" height="638" alt="1" /> 

<p>text1</p> 

<p>text22</p>

<p>text333</p>

</div>

<div class="modal">

<a href="#" class="close_btn">close</a> 

<h1>modla html 구성하기 1</h1> 

<img src="images/test1.jpg" width="850" height="638" alt="1" /> 

<p>text1</p> 

<p>text22</p>

<p>text333</p>

</div>

<div class="modal">

<a href="#" class="close_btn">close</a> 

<h1>modla html 구성하기 1</h1> 

<img src="images/test1.jpg" width="850" height="638" alt="1" /> 

<p>text1</p> 

<p>text22</p>

<p>text333</p>

</div>

<div class="modal">

<a href="#" class="close_btn">close</a> 

<h1>modla html 구성하기 1</h1> 

<img src="images/test1.jpg" width="850" height="638" alt="1" /> 

<p>text1</p> 

<p>text22</p>

<p>text333</p>

</div>

</div>

[/code]​

*이런식의 소스첨부는 첨은인데 들여쓰기가 안되네요; 눈갱 죄송합니다..

제가 드리고 싶은 질문은 이 방법대로라면

컨텐츠1~컨텐츠40 까지 40개의 컨텐츠가 있을 때 각 컨텐츠에 해당되는 상세페이지의 모달소스 부분을

html소스 내에 적어야 된다는 것이 소스가 길어지고 번거롭다는 것이죠.

거의 대부분 모달 안에 들어가는 내용이 이미지 + 링크 아이콘 정도에서 거의 변하지 않기 때문에

저렇게 반복적으로 쓰면 소스코드가 너무 길어지고 또한 비효율적이라고 생각이 들어서요.

혹시나 스크립트로 반복적인 모달창을 제어할 수 있는 방법을 알고 계시면 알려주시면 감사하겠습니다.