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

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

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