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

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”标记它）：

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