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 
    
  • 相关阅读:
    05-Selenium的三种等待
    04-selenium 八大元素定位方法
    03-Selenium简单操作
    python-利用json模块处理json数据几个函数总结
    python-利用pymysql获取数据简单使用总结
    python-利用faker模块生成测试数据
    python-利用random模块生成测试数据封装方法总结
    python-利用shutil模块rmtree方法可以将文件及其文件夹下的内容删除
    pytest--配置用例执行顺序(pytest_ordering插件介绍)
    pytest--mark基本使用(主要通过pytest.ini文件注册标签名,对用例进行标记分组)
  • 原文地址:https://www.cnblogs.com/yangwenyu/p/10649825.html
Copyright © 2011-2022 走看看