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 
    
  • 相关阅读:
    如何理解「复位 」?
    menuconfig配置
    编译Linux内核过程中遇到的问题与解决
    解决qt 5.14版本 qt.network.ssl: QSslSocket::connectToHostEncrypted: TLS initialization faile问题
    认真教好软件工程
    2016同学们博客链接汇总
    车站订票系统可行性分析报告
    第四纪与地貌学(1)——长江口第四纪沉积物中构造与古气候耦合作用的探讨
    软件工程(1)——对书本的温习
    四则运算
  • 原文地址:https://www.cnblogs.com/yangwenyu/p/10649825.html
Copyright © 2011-2022 走看看