Несколько разных типов модалов на одной странице

Question

На нашей странице мы пытаемся иметь 3 различных типа модалей в зависимости от атрибута data-target кнопок. Мы можем отображать только первый мод и можем отображать данные, вторая и третья модели не будут отображаться. Вот код для всех модалов:

<div class="modal fade" id="staticBackdrop" tabindex="-1" role="dialog" aria-labelledby="staticBackdropLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
 <div class="modal-header">
 <h5 class="modal-title" id="staticBackdropLabel">Shift Details</h5>
 <button type="button" class="close" data-dismiss="modal" aria-label="Close">
 <span aria-hidden="true">&times;</span>
</button>
 </div>
                  <div class="modal-body" id="normalBody">
                   <p id="normalText"></p>
                   <div class="modal-footer">
 <div id="success-text"></div>
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
 <button id="subOutButton" type="button" class="btn btn-secondary">Sub-Out</button>
 <button id="subInButton" type="button" class="btn btn-secondary">Sub-In</button>
                   </div>
</div>
</div>
</div>

<div class="modal fade" id="yourShift" tabindex="-1" role="dialog" aria-labelledby="yourShiftLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
 <div class="modal-header">
 <h5 class="modal-title" id="yourShiftLabel">Shift Details</h5>
 <button type="button" class="close" data-dismiss="modal" aria-label="Close">
 <span aria-hidden="true">&times;</span>
</button>
 </div>
                  <div class="modal-body" id="yourShiftBody">
                   <p id="yourShiftText"></p>
                   <div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
 <button type="button" class="btn btn-secondary" data-dismiss="modal">Sub-Out</button>
                   </div>
</div>
</div>
</div>

<div class="modal fade" id="needsSub" tabindex="-1" role="dialog" aria-labelledby="needsSubLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
 <div class="modal-header">
 <h5 class="modal-title" id="needsSubLabel">Shift Details</h5>
 <button type="button" class="close" data-dismiss="modal" aria-label="Close">
 <span aria-hidden="true">&times;</span>
</button>
 </div>
                  <div class="modal-body" id="needsSubBody">
                   <p id="needsSubText"></p>
                   <div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
 <button type="button" class="btn btn-secondary" data-dismiss="modal">Sub-In</button>
                   </div>
</div>
</div>
</div>

Вот пример кода для кнопок, которые запускают модал:

<td id="monDinner" day ="0">
<div class="list-group">
<a id="monDinnerManager" taskid = 1 class="list-group-item list-group-item-action list-group-item-light" data-container="body" data-toggle="modal"
   data-target=“#yourShift”>Manager</a>
<a id="monFirstDinner" taskid = 2 class="list-group-item list-group-item-action list-group-item-light" data-container="body" data-toggle="modal"
   data-target="#staticBackdrop">First Dinner</a>
 <a id="monSecondDinner" taskid = 3 class="list-group-item list-group-item-action list-group-item-light" data-container="body" data-toggle="modal"
   data-target="#staticBackdrop">Second Dinner</a>
</div>
</td>

А вот код javascript, который следует заполнить тела:

if (modalId == '#staticBackdrop') {
           console.log("here");
           $('#normalText').load(dataURL,function() {
$('#staticBackdrop').modal('show');
});
           }
           else if (modalId == '#yourShift') {
           console.log(modalId);
           $('#yourShiftText').load(dataURL,function() {
           $('#staticBackdrop').modal({show:false});
           $('#needsSub').modal({show:false});
$('#yourShift').modal({show:true});
});
           }
           else {
           $('#needsSubText').load(dataURL,function() {
$('#modal-body').modal({show:true});
});
           }

Заранее большое спасибо!

Answer 1

Вы забыли добавить несколько близких </div> в свой код (я пометил это комментарием "там"):

    <div class="modal fade" id="staticBackdrop" tabindex="-1" role="dialog" aria-labelledby="staticBackdropLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
 <div class="modal-header">
 <h5 class="modal-title" id="staticBackdropLabel">Shift Details</h5>
 <button type="button" class="close" data-dismiss="modal" aria-label="Close">
 <span aria-hidden="true">&times;</span>
</button>
 </div>
                  <div class="modal-body" id="normalBody">
                   <p id="normalText"></p>
                  </div> <!-- there -->
                   <div class="modal-footer">
 <div id="success-text"></div>
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
 <button id="subOutButton" type="button" class="btn btn-secondary">Sub-Out</button>
 <button id="subInButton" type="button" class="btn btn-secondary">Sub-In</button>
                   </div>
</div>
</div>
</div>

<div class="modal fade" id="yourShift" tabindex="-1" role="dialog" aria-labelledby="yourShiftLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
 <div class="modal-header">
 <h5 class="modal-title" id="yourShiftLabel">Shift Details</h5>
 <button type="button" class="close" data-dismiss="modal" aria-label="Close">
 <span aria-hidden="true">&times;</span>
</button>
 </div>
                  <div class="modal-body" id="yourShiftBody">
                   <p id="yourShiftText"></p>
                   </div> <!-- there -->
                   <div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
 <button type="button" class="btn btn-secondary" data-dismiss="modal">Sub-Out</button>
                   </div>
</div>
</div>
</div>

<div class="modal fade" id="needsSub" tabindex="-1" role="dialog" aria-labelledby="needsSubLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
 <div class="modal-header">
 <h5 class="modal-title" id="needsSubLabel">Shift Details</h5>
 <button type="button" class="close" data-dismiss="modal" aria-label="Close">
 <span aria-hidden="true">&times;</span>
</button>
 </div>
                  <div class="modal-body" id="needsSubBody">
                   <p id="needsSubText"></p>
                   </div> <!-- and there -->
                   <div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
 <button type="button" class="btn btn-secondary" data-dismiss="modal">Sub-In</button>
                   </div>
</div>
</div>
</div>