基于bootstrap 在同一个界面弹出不同的模态框
同一个页面如何操作多个模态框的弹出
<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 --> --------------------- 作者:ChiangShenHung 来源:CSDN 原文:https://blog.csdn.net/jinshong/article/details/83501880