부스트스트랩으로 적용한 "모달창" 문제 해결법좀 알려주세요...
본문
안녕하세요 제가 부스트 스트랩을 통해서 모달창을 했는데
------------------------------------------------------------------------------------
<!-- 메인 페이지 비밀 pc -->
<div class="col-md-3 col-sm-3 col-xs-6">
<div class='main-shop-01'>
<div class="thumbnail" data-toggle="modal" data-target="#myModal">
<img src="/img/main-img/product01.jpg" alt="비밀">
<div class='main-info-box'>
<h3>비밀</h3>
<p>비밀</p>
<div class="card-footer">
<big class="text-muted">★ ★ ★ ★ ☆</big>
</div>
<strike>
<h5>비밀</h5>
</strike>
<h5>비밀</h5>
</div>
</div>
</div>
</div>
<!-- 메인 페이지 비밀 pc 끝 -->
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="main-margin">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">비밀</h4>
</div>
<div class="modal-body">
<!-- 모탈 페이지 비밀 pc -->
<div class="col-md-12 col-sm-12 col-xs-12">
<div class='main-shop-01'>
<div class='main-info-box'>
<div class="thumbnail">
<img src="/img/main-img/product01.jpg" alt="비밀">
<h3>비밀</h3>
<p>비밀</p>
<div class="card-footer">
<small class="text-muted">★ ★ ★ ★ ☆</small>
</div>
<strike>
<h5>비밀</h5>
</strike>
<h5>비밀</h5>
</div>
</div>
</div>
</div>
</div>
<!-- 모달 아이콘 내용 pc -->
<!-- 쇼핑몰 아이콘 내용 pc -->
<div class="col-md-3 col-sm-3 col-xs-6">
<div class="main-margin-icon">
<a href=""><img src="/img/main_shop/com_img1.jpg" alt="" /></a>
</div>
</div>
<div class="col-md-3 col-sm-3 col-xs-6">
<div class="main-margin-icon">
<a href=""><img src="/img/main_shop/com_img2.jpg" alt="" /></a>
</div>
</div>
<div class="col-md-3 col-sm-3 col-xs-6">
<div class="main-margin-icon">
<a href=""><img src="/img/main_shop/com_img3.jpg" alt="" /></a>
</div>
</div>
<div class="col-md-3 col-sm-3 col-xs-6">
<div class="main-margin-icon">
<a href=""><img src="/img/main_shop/com_img4.jpg" alt="" /></a>
</div>
</div>
<!-- 모달 아이콘 내용 pc 끝 -->
<br>
<div class="modal-footer">
<button type="button" class="btn btn-primary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
<!-- 모달 창 끝 -->
----------------------------------------------------------
이런식으로 모달창 부스트스트랩을 적용 시켰습니다.
그런데 뜨는 건 정확하게 뜨는데
위 소스들을 전체를 복사를 해서 이걸 4개 정도 할려고하는데 4개를 하면 나머지 모달창 내용들이 무조건 똑같이 나옵니다...
아무리 수정을 해도 제일 첫번쨰 것과 똑같이 나옵니다.
어떤걸 수정하면 되는지 혹시 아시는분들 부탁합니다.
답변 1
부스트스트랩을 한번도 써본적이 없지만
모달창의 id값을
모달창1 <div class="modal fade" id="myModal1"..
모달창2 <div class="modal fade" id="myModal2"..
모달창3 <div class="modal fade" id="myModal3"..
모달창4 <div class="modal fade" id="myModal4"..
이런식으로 변경후 한번 호출해보세요.