zoukankan      html  css  js  c++  java
  • 基于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=" 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=" 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 
    
  • 相关阅读:
    筛选数据
    sed实现路径替换
    mask rcnn
    py faster rcnn+ 1080Ti+cudnn5.0
    反对迭代0:停止拖延,开始迭代
    故事点数是对工时的度量
    放弃在每日站会上按成员逐个发言
    So Easy!7000元Scrum认证课1元抢~
    用leangoo怎么做需求管理及规划?(产品Backlog、用户故事)
    怎么用leangoo做需求管理?(用户故事地图)
  • 原文地址:https://www.cnblogs.com/yangwenyu/p/10649825.html
Copyright © 2011-2022 走看看