div 클래스 중복적용 채택완료

</p>

<p>/*연관배열*/</p>

<pre>
$add = array(</pre>

<p>/*내용*/</p>

<p>);</p>

<p> </p>

<p> </p>

<p>/*연관배열 출력*/</p>

<pre>
<?php for($i=1;$i<=20;$i++){?> 
    <?if($it['it_'.$i.'_subj']){?> // 1~20 중 여분필드제목에 값이 있는것만 출력
        <tr>
            <td><label for="modal" class="button">모달 윈도우 열기</label></td> //팝업버튼
        </tr>

        <input type="checkbox" id="modal" class="hidden">
        <div class="box_modal">
            <label for="modal" class="closer">x</label>
            <div class="text">
                <h3><?php echo $it['it_'.$i]?></h3> // 여분필드 값 출력
                <p><?php echo $add[$it['it_'.$i]];?></p> //연관배열 출력
            </div>
        </div>
</pre>

<p>

</p>

<pre>
/* 버튼 디자인*/
.button {
 font-size:0.813em;
 font-weight:600;
 vertical-align:middle;
 cursor:pointer;
 color:#38a1db;
}

/* 모달 윈도우 디자인 */
.box_modal {
 position:fixed;
 display:block;
 width:300px;
 height:150px;
 top:50%;
 left:50%;
 margin-top:-75px;
 margin-left:-150px;
 background:#d9e5e9;
 border:1px solid #386980;
 overflow:hidden;

 /* 아래 부분은 애니메이션 효과를 위한 부분 */
 visibility: collapse;
 opacity: 0.6;
 filter: alpha(opacity=60);
 -webkit-transition: all .2s ease;
 transition: all .2s ease;
 -webkit-transform: scale(0, 0);
 -ms-transform: scale(0, 0);
 transform: scale(0, 0);
}
.box_modal:hover {
 opacity: 1;
 filter: alpha(opacity=100);
}

/* 닫기 버튼으로 사용할 라벨 */
.closer {
 position:absolute;
 width:30px;
 height:30px;
 top:0;
 right:0;
 background:#eee;
 border-left:1px solid #386980;
 border-bottom:1px solid #386980;
 text-align:center;
 line-height:26px;
 font-size:16x;
 cursor:pointer;
}
.text {
 display:inline-block;
 padding:20px;
}
.text h3 {
 font-size:19px;
 margin:0;
}
.text p {
 font-size:13px;
}

/* 모달 윈도우가 팝업되는 코어 소스 */
input#modal[type=checkbox]:checked ~ .box_modal {
 visibility: visible;
 -webkit-transform: scale(1, 1);
 -ms-transform: scale(1, 1);
 transform: scale(1, 1);
}
</pre>

<p>

</p>

<p>//HTML</p>

<p><div class="text<?php echo $i?> "></p>

<p>