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 
    
  • 相关阅读:
    注解
    使用反射机制调用属性和私有成员与代理模式的介绍
    动态代理模式
    SVN的安装与常用功能使用以及解决安装配置过程中的一些错误
    企业私服
    -Java-log4j
    List,Set,Map用法以及区别
    接口和抽象类有什么区别
    Dalvik opcodes
    外派公司或者外包公司,真的适合选择吗?
  • 原文地址:https://www.cnblogs.com/yangwenyu/p/10649825.html
Copyright © 2011-2022 走看看