채택완료

모달 질문드려요..

독학하면서 천천히 홈페이지 만드는 중입니다.

모달을 접하고 신세계(!!)를 보았는데 이게 생각처럼 잘 안 되네요.

http://bootstrapk.com/javascript/#modals-usage

위 사이트에서 예제를 보고 내용이 다른 모달을 두 개를 만들려고 했습니다.

버튼은 두 개(회원등급/사이트맵)는 정상 출력되는데,

문제는 버튼을 클릭하면 둘 다 내용은 첫번째[회원등급]으로 똑같이 나옵니다. (두번째 내용[사이트맵]이 안 나옵니다 ㅠㅠ)

id값을 어떻게 지정해줘야하는지 잘 모르겠어서... 밤을 꼬박 새다가 이른 아침부터 여쭙니다.

<!--modal start -->
<div class="sidebar-icon-cell inline-d">
<button class="mnborder" style="vertical-align: top;" type="button" data-target="#myModal" data-toggle="modal">
   <i class="fa fa-users normal"></i>
   <span class="block-d font-11">회원등급</span>
</button>
<div tabindex="-1" class="modal fade" id="myModal" role="dialog" aria-hidden="true" aria-labelledby="myModalLabel">
  <div class="modal-dialog">
    <div class="modal-content">

      <div class="modal-header">
        <button class="close" aria-label="Close" type="button" data-dismiss="modal"><span aria-hidden="true">×</span></button>
        <h4 class="modal-title en" id="myModalLabel" style="text-align: left;">회원등급</h4>
      </div>
      <div class="modal-body">
       <p>회원등급은 다음과 같습니다.</p>
</div>
      <div class="modal-footer">
      </div>

    </div>
  </div>
</div>
</div><!--modal end-->

<!--modal start -->
<div class="sidebar-icon-cell inline-d">
<button class="mnborder" style="vertical-align: top;" type="button" data-target="#myModal" data-toggle="modal">
   <i class="fa fa-globe normal"></i>
   <span class="block-d font-11">사이트맵</span>
</button>
<div tabindex="-1" class="modal fade" id="myModal" role="dialog" aria-hidden="true" aria-labelledby="myModalLabel">
  <div class="modal-dialog">
    <div class="modal-content">

      <div class="modal-header">
        <button class="close" aria-label="Close" type="button" data-dismiss="modal"><span aria-hidden="true">×</span></button>
        <h4 class="modal-title en" id="myModalLabel" style="text-align: left;">사이트맵</h4>
      </div>
      <div class="modal-body">
       <p>사이트맵입니다.</p></div>
      <div class="modal-footer">
      </div>

    </div>
  </div>
</div>
</div><!--modal end-->

|

답변 1개 / 댓글 1개

채택된 답변
+20 포인트
2017-08-01 (화) 06:34:31

버튼에 data-target="#myModal"  아이디 값하고 

모달창에  id="myModal" 하고 맞춰주면 따로 적용 됩니다.

버튼 하고 모달팝업 하고 한 셋트니까 myModal_1 하고 myModal_2

이렇게 하시면 되겠네요.

<!--modal start -->
<div class="sidebar-icon-cell inline-d">
<button class="mnborder" style="vertical-align: top;" type="button" data-target="#myModal" data-toggle="modal">
   <i class="fa fa-users normal"></i>
   <span class="block-d font-11">회원등급</span>
</button>
<div tabindex="-1" class="modal fade" id="myModal" role="dialog" aria-hidden="true" aria-labelledby="myModalLabel">
  <div class="modal-dialog">
    <div class="modal-content">

      <div class="modal-header">
        <button class="close" aria-label="Close" type="button" data-dismiss="modal"><span aria-hidden="true">×</span></button>
        <h4 class="modal-title en" id="myModalLabel" style="text-align: left;">회원등급</h4>
      </div>
      <div class="modal-body">
       <p>회원등급은 다음과 같습니다.</p>
</div>
      <div class="modal-footer">
      </div>

    </div>
  </div>
</div>
</div><!--modal end-->

<!--modal start -->
<div class="sidebar-icon-cell inline-d">
<button class="mnborder" style="vertical-align: top;" type="button" data-target="#myModal" data-toggle="modal">
   <i class="fa fa-globe normal"></i>
   <span class="block-d font-11">사이트맵</span>
</button>
<div tabindex="-1" class="modal fade" id="myModal" role="dialog" aria-hidden="true" aria-labelledby="myModalLabel">
  <div class="modal-dialog">
    <div class="modal-content">

      <div class="modal-header">
        <button class="close" aria-label="Close" type="button" data-dismiss="modal"><span aria-hidden="true">×</span></button>
        <h4 class="modal-title en" id="myModalLabel" style="text-align: left;">사이트맵</h4>
      </div>
      <div class="modal-body">
       <p>사이트맵입니다.</p></div>
      <div class="modal-footer">
      </div>

    </div>
  </div>
</div>
</div><!--modal end-->

답변에 대한 댓글 1개

흐 이렇게 간단한 것을 ㅜㅜ... 감사합니다. 열심히 공부 더 해야겠네요 ㅠ

답변을 작성하려면 로그인이 필요합니다.