팝업창을 반복적으로 띄우고싶을 때 어떻게 해야하나요??
관련링크
본문
<div class="portfolio_wrap">
<div class="portfolio">
<div class="popUp_info">
<img src="images/img1.png" alt="" />
<p>포트폴리오 제목 1</p>
</div>
<div id="modal">
<div class="body">
<div class="button">
<button type="button" id="btn_close">X</button>
</div>
</div>
</div>
</div>
</div>
<script>
jQuery(document).ready(function(){
$('.popUp_info').click(function(){
$("#modal").addClass('show');
});
$('.button > button').click(function(){
$("#modal").removeClass('show');
});
});
</script>
-------------------------------------------------------------
위처럼 구조를 잡고 제이쿼리를 사용해 popUp_info를 누르면 modal창이 나오고 닫기버튼을 누르면 modal창이 닫히게끔 만들었는데, 문제는 여러개의 modal창을 만들고 싶은데 방법을 모르겠어요
즉 이미지1을 눌렀을 때 modal1이 나타나고 이미지2를 눌렀을 때 modal2가 나타나는.. 이러한 방식으로 만들고 싶은데 어떻게 해야하나요??
반복문을 사용해야한다고 들었는데 방법을 모르겠네요 ㅠㅠ 도와주세요 선생님들
참고 사이트는 제일기획 포트폴리오를 벤치마킹하려고해요.
링크 함께 올려두겠습니다~
답변 1
모달창을 1개만 만들어두시고 안에 들어갈 정보를 array로 만들어서
for문 돌릴거 없이 모달링크이미지를 클릭했을때 부모의 index값을 추출해서 n변수에 저장하시고 array[n]['데이터'] 로 html이나 text매서드 사용하시면 될거같네용
예를들어서
<div>
<div>
<a class='modalBtn'>모달링크1</a>
</div>
<div>
<a class='modalBtn'>모달링크2</a>
</div>
</div>
<script>
$(".modalBtn").on("click",function(){
var n = $(this).parent().index();
var data = [
{
mo_img : "이미지1경로",
mo_txt : "텍스트1"
},
{
mo_img : "이미지2경로",
mo_txt : "텍스트2"
}
];
function data() {
$("모달의 이미지").attr("src",data[n][mo_img]);
$("텍스트1").html(data[n][mo_txt]);
};
data();
});
</script>
대충 이정도..?
답변 감사합니다!
근데 저는 modal창 안에 탭바를 구현해서 사용하고 싶은데 그럴 경우에도 님이 말씀하신 방법을 사용해도 되는 것인가요?
사실 array나 뭐 data, text매서드 이런거 잘 모르겠어요 ㅠㅠ 너무 어렵네요 ㅜㅠ
data는 제가 임의로 변수를 준것뿐입니다 다른변수명을 사용하셔도 무관하고 text랑 html매써드는 말그대로 텍스트 ..그니까 html을 바까주는것입니다.
상단에 data=[{배열:"배열"}] array를 배열로 만든 변수명일뿐..큰의미는없습니다.
탭바로 만드신다면 안에 컨텐츠들이 더많을텑데 그러시면 안에서 더 많은 배열을 만들어주시면 됩니다.
var data = [
{
mo_img : "이미지1경로",
mo_txt : "텍스트1",
mo_txt2 : "텍스트1-1";
},
{
mo_img : "이미지2경로",
mo_txt : "텍스트2"
mo_txt2 : "텍스트2-1"
}
{
mo_img : "이미지3경로",
mo_txt : "텍스트3"
mo_txt2 : "텍스트3-1"
}
];
이런식으루요.
그리고 모달창 안의 탭구현은 따로 구현해야겟죠..
아! 그리고 어제 짠 코드에서 팝업 show 코드는 빠져있네요~퇴근시간에 급하게 적다보니 . . .
알려주셔서 감사합니다~ 제가 어제 하루종일 다른 작업하느라 이제야 봤어요 ㅠㅠ 잘은 못하지만 알려주신대로 한번 해보겠습니다!
