javascript - 一页中多种不同类型的模态框

Question

在我们的页面中，我们尝试根据按钮的数据目标属性设置 3 种不同类型的模式。我们只能显示第一个模态，并且可以获取要显示的数据，第二个和第三个模型不会显示。 这是所有模式的代码:

<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>在您的代码中(我已用注释“there”标记它):

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