Bootstrap 3 multiple Modal Issues

Question

У меня есть страница, которую я хотел бы открыть в нескольких модалях. Мне удалось показать модальность для id = "myModal", который был примером im, пытающимся реплицировать. Я создал вторую с id = "redcarpet", и я не могу получить всплывающее окно с одним окном. Я надеюсь, что кто-то может увидеть ошибку в моем коде и может помочь мне исправить это.

<li class="dropdown"> 
          <a href="#" class="dropdown-toggle dropdown" data-toggle="dropdown" data-hover="dropdown" 
          data-delay="200" data-close-others="false"><span style="color: black; font-family: 'Modern Regular';">PHOTOS</span></a> 
          <ul class="dropdown-menu"> 
           <li> 
            <a href="#redcarpet">Red Carpet</a> 
           </li> 
           <li> 
          <a href="#" data-toggle="modal" data-target="#myModal"><span style="color: black; font-family: 'Modern Regular';">LEAD</span></a> 
         </li> 

× 2015 Награды

 <!-- red carpet Modal --> 
     <!-- Modal --> 
    <div class="modal modal-wide fade" id="redcarpet" tabindex="-1" role="dialog" 
    aria-labelledby="redcarpetLabel" aria-hidden="true"> 
     <div class="modal-dialog"> 
      <div class="modal-content"> 
       <div class="modal-header"> 
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> 
        <h4 class="modal-title" id="redcarpetLabel">2015 Awards</h4> 
       </div> 
       <div class="modal-body"> 
        <iframe src="redCarpet.html" width="580" height="780" frameborder="0" 
        allowtransparency="true"></iframe> 
       </div> 
      </div> 
     </div> 
     <!-- /.modal-content --> 
    </div> 
    <!-- /.modal-dialog --> 
    <!-- /.modal --> 

<!-- Modal --> 
    <div class="modal modal-wide fade" id="myModal" tabindex="-1" role="dialog" 
    aria-labelledby="myModalLabel" aria-hidden="true"> 
     <div class="modal-dialog"> 
      <div class="modal-content"> 
       <div class="modal-header"> 
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> 
        <h4 class="modal-title" id="myModalLabel">2015 Billboard Music Awards</h4> 
       </div> 
       <div class="modal-body"> 
        <iframe src="billboardmusicawards_lead.htm" width="580" height="780" frameborder="0" 
        allowtransparency="true"></iframe> 
       </div> 
      </div> 
     </div> 
     <!-- /.modal-content --> 
    </div> 
    <!-- /.modal-dialog --> 
    <!-- /.modal --> 

Answer 1

Вы говорите, что вы изменили идентификатор контейнера модального div на redcarpet (да, это видно в вашем коде).

Однако, в атрибуте data-target для ссылки, который вызывает эту модальность, вы все еще используете старый идентификатор (#myModal):

<a href="#" data-toggle="modal" data-target="#myModal">