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

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>

Answer 1

</div>您忘记在代码中添加一些关闭（我已用注释“there”标记它）：&nbsp; &nbsp; <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">&nbsp;<div class="modal-header">&nbsp;<h5 class="modal-title" id="staticBackdropLabel">Shift Details</h5>&nbsp;<button type="button" class="close" data-dismiss="modal" aria-label="Close">&nbsp;<span aria-hidden="true">&times;</span></button>&nbsp;</div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="modal-body" id="normalBody">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<p id="normalText"></p>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div> <!-- there -->&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<div class="modal-footer">&nbsp;<div id="success-text"></div><button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>&nbsp;<button id="subOutButton" type="button" class="btn btn-secondary">Sub-Out</button>&nbsp;<button id="subInButton" type="button" class="btn btn-secondary">Sub-In</button>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;</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">&nbsp;<div class="modal-header">&nbsp;<h5 class="modal-title" id="yourShiftLabel">Shift Details</h5>&nbsp;<button type="button" class="close" data-dismiss="modal" aria-label="Close">&nbsp;<span aria-hidden="true">&times;</span></button>&nbsp;</div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="modal-body" id="yourShiftBody">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<p id="yourShiftText"></p>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;</div> <!-- there -->&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<div class="modal-footer"><button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>&nbsp;<button type="button" class="btn btn-secondary" data-dismiss="modal">Sub-Out</button>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;</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">&nbsp;<div class="modal-header">&nbsp;<h5 class="modal-title" id="needsSubLabel">Shift Details</h5>&nbsp;<button type="button" class="close" data-dismiss="modal" aria-label="Close">&nbsp;<span aria-hidden="true">&times;</span></button>&nbsp;</div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="modal-body" id="needsSubBody">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<p id="needsSubText"></p>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;</div> <!-- and there -->&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<div class="modal-footer"><button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>&nbsp;<button type="button" class="btn btn-secondary" data-dismiss="modal">Sub-In</button>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;</div></div></div></div>