부스트스트랩으로 적용한 "모달창" 문제 해결법좀 알려주세요...

매출이 오르면 내리는 수수료! 지금 수수료센터에서 전자결제(PG)수수료 비교견적 신청해 보세요!
부스트스트랩으로 적용한 "모달창" 문제 해결법좀 알려주세요...

QA

부스트스트랩으로 적용한 "모달창" 문제 해결법좀 알려주세요...

본문

안녕하세요 제가 부스트 스트랩을 통해서 모달창을 했는데

 

 

------------------------------------------------------------------------------------

                <!-- 메인 페이지 비밀 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"..

이런식으로 변경후 한번 호출해보세요.

답변을 작성하시기 전에 로그인 해주세요.
전체 287
QA 내용 검색

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT