同一个页面如何操作多个模态框的弹出

<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

基于bootstrap 在同一个界面弹出不同的模态框的更多相关文章

  1. jQuery制作弹出窗(模态框)

    来源:(二少)在南极 ##index.html <!DOCTYPE html><html lang="zh"><head> <meta c ...

  2. sweetalert2 全面替代 alert ,从 sweetalert2 弹出 text 到 弹出 Dom 以及模态框和取消 sweetalert2 的 OK 按钮

    1. 简易基本版 sweetalert 涵盖日常基本的弹出及对话框 2. 升级版本 sweetalert2 满足常见开发工作中的各种要求 3 取消 OK 按钮, 只需要设置 showConfirmBu ...

  3. element-ui 弹出组件的遮罩层在弹出层dialog模态框的上面

     造成的原因: 因为dialog的组件外层div设置了 position:absolute: 属性所以导致遮罩层会在最上面. 解决方法: 在属性内加上这段代码 :append-to-body=&quo ...

  4. bootstrap中popover.js(弹出框)使用总结+案例

    bootstrap中popover.js(弹出框)使用总结+案例 *转载请注明出处: 作者:willingtolove: http://www.cnblogs.com/willingtolove/p/ ...

  5. 基于Jquery 简单实用的弹出提示框

    基于Jquery 简单实用的弹出提示框 引言: 原生的 alert 样子看起来很粗暴,网上也有一大堆相关的插件,但是基本上都是大而全,仅仅几句话可以实现的东西,可能要引入好几十k的文件,所以话了点时间 ...

  6. 基于jQuery鼠标点击弹出登陆框效果

    基于jQuery鼠标点击弹出登陆框效果.这是一款扁平样式风格的jQuery弹出层登陆框特效.效果图如下: 在线预览   源码下载 实现的代码. html代码: <input type=" ...

  7. 基于js alert confirm样式弹出框

    基于js alert confirm样式弹出框.这是一款根据alert confirm优化样式的确认对话框代码. 在线预览   源码下载 实现的代码. html代码: <div id=" ...

  8. Bootstrap Modal多个弹出层顺序

    Bootstrap Modal多个弹出层顺序与div的顺序关联.后来者居上:即div靠后的modal层弹出的时候会在上层. 比如上图所示,模态框2弹出的时候会在模态框1上面.

  9. 一款基于jquery超炫的弹出层提示消息

    今天给大家带来一款基于jquery超炫的弹出层提示消息.这款实例页面初始时,一个go按钮.当单击go按钮时,提示强出层以动画形式出现.效果图如下: 在线预览   源码下载 实现的代码. html代码: ...

随机推荐

  1. poj 1753 Flip Game(暴力枚举)

    Flip Game   Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 52279   Accepted: 22018 Des ...

  2. 工程点点app爬虫和sign算法破解

    这世界真的什么人都有,哎,继续分析. 通过对工程点点的逆向和抓包分析,发现工程点点需要x-sign和token验证. this.b.a(aVar.b("Accept", " ...

  3. Kubernetes集群部署核心步骤

    目录 前言 一.所有节点安装docker 二.所有节点安装kubeadm 三.安装master节点 四.部署网络插件 五.安装node节点 六.运行一个demo 前言 这里使用环境:Ubuntu 18 ...

  4. 【Redis】SpringBoot整合Redis

    一.Maven依赖 <dependency> <groupId>org.springframework.boot</groupId> <artifactId& ...

  5. LaTeX 自动避免重复内容

    在编辑自动化文档时,很容易出现在文档多处提及相同内容的情况.例如,描述某具体设备的图片,在多个工艺中都会用到,而又无法确定工艺出现顺序,或者对于不同企业,工艺不尽相同.这时我们可能会希望,latex帮 ...

  6. 纯css写一个大太阳的天气图标

    效果 效果图如下 ​ 实现思路 div实现太阳的一条矩形光影 before伪元素制作另一条光影矩形,和已有的转变90° after伪元素画个圆实现太阳样式 dom结构 用两个嵌套的div容器,父容器来 ...

  7. Apollo源码解析-搭建调试环境

    准备工作 本地运行时环境 JDK :1.8+ MySQL :5.6.5+ Maven :3.6.1 IDE :IntelliJ IDEA Apollo的表结构对timestamp使用了多个defaul ...

  8. 用代码触发testng实现并发测试

    有时候希望测试用例能用代码触发,发现testng支持这种操作,于是记录一下: 首先添加testng依赖: <dependency> <groupId>org.testng< ...

  9. Elastic-Job:动态添加任务,支持动态分片

    多情只有春庭月,犹为离人照落花. 概述 因项目中使用到定时任务,且服务部署多实例,因此需要解决定时任务重复执行的问题.即在同一时间点,每一个定时任务只在一个节点上执行.常见的开源方案,如 elasti ...

  10. 关于ArrayList源码

    一.构造方法 private static final int DEFAULT_CAPACITY = 10; //空参的构造方法,初始化数组长度为默认值,默认值为10 public ArrayList ...