在我們的頁面中，我們嘗試根據按鈕的數據目標屬性設置 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">×</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">×</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>
1 回答
瀟湘沐
TA貢獻1816條經驗 獲得超6個贊
</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">×</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">×</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">×</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>
- 1 回答
- 0 關注
- 145 瀏覽
添加回答
舉報
0/150
提交
取消