基於bootstrap 在同一個介面彈出不同的模態框
阿新 • • 發佈:2018-12-18
同一個頁面如何操作多個模態框的彈出
<button class="btn btn-info" data-toggle="modal" data-target="#myModal">第一個模態框</button> <button class="btn ben-default" data-toggle="modal" data-target="#myModal_2">第二個模態框</button> <!--第一個模態框的ID為myModal--> <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">× </button> <h4 class="modal-title" id="myModalLabel"> <!--模態框標題--> </h4> </div> <div class="modal-body" style="width: 550px; margin: 0px auto;"> <!-- 新增你的彈窗內容 --> <!-- 新增你的彈窗內容 --> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">關閉 </button> <button type="button" class="btn btn-primary" id="input-button" onclick="setUserGold()"> PY成功 <!--成功的按鈕--> </button> </div> </div><!-- /.modal-content --> </div><!-- /.modal-dialog --> </div><!-- /.modal --> <!--第一個模態框的ID為myModal_2--> <div class="modal fade" id="myModal_2" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">× </button> <h4 class="modal-title" id="myModalLabel"> <!--模態框標題--> </h4> </div> <div class="modal-body" style="width: 550px; margin: 0px auto;"> <!-- 新增你的彈窗內容 --> <!-- 新增你的彈窗內容 --> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">關閉 </button> <button type="button" class="btn btn-primary" id="input-button" onclick="setUserGold()"> PY成功 <!--成功的按鈕--> </button> </div> </div><!-- /.modal-content --> </div><!-- /.modal-dialog --> </div><!-- /.modal -->
通過不同的模態框ID標籤來達到彈出不同介面的模態框