div 클래스 중복적용
본문
안녕하세요!
모달 팝업창을 구현중인데 막힌게 있어서 조언을 받고싶어서 글 올립니다 ㅜ
HTML
/*연관배열*/
$add = array(
/*내용*/
);
/*연관배열 출력*/
<?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>
CSS
/* 버튼 디자인*/
.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);
}
여분필드에 값이 있으면 모달팝업창에 연관배열 값을 출력하고 싶습니다.
한개 있을때는 문제가 안되는데 여러개 중복될시 동시에 팝업되면서 팝업창이 다 겹칩니다 ㅜㅜ
//HTML
<div class="text<?php echo $i?> ">
이런식으로 클래스를 여러개 지정해주어서 처리하려고 했는데 css에 추가할게 너무 많고 복잡해 지더군요,, 혹시 좋은 방법이 없을까요?
답변 1
모달창보기를 클릭할때 모달창에 해당 값을 넣는 식으로
한개의 모달창안에 보여주시면 되지않을까요?
모달에 보여주고자하는 여분필드값은 이미 있을터이니
클릭할때 해당 여분필드값을 모달에 넣어주고 보여주고 닫고 다른 모달열기 눌렀을때
다른 모달의 여분필드값을 하나의 모달에 계속해서 넣어서 보여주는거죠
답변을 작성하시기 전에 로그인 해주세요.
