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

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

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"..

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

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

회원로그인

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