несколько модалов на одном сайте

Question

Эй, я не могу понять это. У меня есть сценарий, который генерирует мои модалы в конце моего сайта. Вот две модели, которые я генерировать:

<div class="modal fade" id="1_10_1" tabindex="-1" role="dialog" aria-labelledby="1_10_1" 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">&times;</button> 
      </div> 
      <div class="modal-body"> 

       <table> 
        <tr> 
         <td>10</td> 
         <td>Margharita<br>Tomatensoße und Käse</td> 
         <td>6.5</td> 
        <form><input type="text" id="Anzahl" value="1"></form> 


      </div> 
      <div class="modal-footer"> 
       <button type="button" class="btn btn-primary" data-dismiss="modal">In den Warenkorb</button> 
      </div> 
     </div> 
    </div> 
</div> 
<div class="modal fade" id="1_12_1" tabindex="-1" role="dialog" aria-labelledby="1_12_1" 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">&times;</button> 
      </div> 
      <div class="modal-body"> 

       <table> 
        <tr> 
         <td>12</td> 
         <td>Rindersalami<br></td> 
         <td>6.7</td> 
        <form><input type="text" id="Anzahl" value="1"></form> 


      </div> 
      <div class="modal-footer"> 
       <button type="button" class="btn btn-primary" data-dismiss="modal">In den Warenkorb</button> 
      </div> 
     </div> 
    </div> 
</div> 

Тогда у меня есть второй сценарий на том же сайте, который создает кнопки для модальностей в таблице. Здесь мои кнопки для приведенного выше модального примера.

Кнопка для первого модального:

<button class="btn btn-success" data-toggle="modal" data-target="#1_10_1">6.5&nbsp; &euro;</button> 

Кнопка для второго модальный:

<button class="btn btn-success" data-toggle="modal" data-target="#1_12_1">6.7&nbsp; &euro;</button> 

Когда я теперь нажать первую кнопку на моей странице модальный появляется с содержанием обеих модальностей но только одна кнопка закрытия. Когда я закрываю этот модальный, а затем нажимаю кнопку второго модального, мой экран выводит .modal-backdrop, но не модальный, и он остается в этом состоянии. Я должен обновить свой сайт, чтобы продолжить. Что я делаю неправильно? Надеюсь, кто-нибудь может мне помочь.

Answer 1

Вам необходимо закрыть теги table и tr в обоих модалях.

  <table> 
       <tr> 
        <td>10</td> 
        <td>Margharita<br>Tomatensoße und Käse</td> 
        <td>6.5</td> 
       </tr> //MISSING 
      </table> //MISSING 

Рабочий пример

http://www.bootply.com/93669