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

<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. 【占坑】IDEA从github 导入并运行 SpringBoot + VUE项目

    最近工程实践的项目内容是开发一个类似于博客和bbs论坛的系统,在github上找了一个类似的项目可以照着写一写.所以这里先占着坑,等把后端的数据库连接学完了再来填坑. github项目链接:githu ...

  2. Stealth——01场景的基本搭建以及基础逻辑

    版权申明: 本文原创首发于以下网站: 博客园『优梦创客』的空间:https://www.cnblogs.com/raymondking123 优梦创客的官方博客:https://91make.top ...

  3. SpringCloud 学习(二)-2 :Securing The Eureka Server

    由于工作等种种原因未能连续进行学习,现在继续学习微服务,不过是新建的demo,springcloud版本用的是Finchley.SR2. 之前用简单demo实现了注册中心,现在来对注册中心加安全验证: ...

  4. Scrapy框架的下载与安装

    一.下载scrapy 首先,如果安装了anaconda, 可以直接在terminal窗口中输入: conda install scrapy 在图示符中,输入y, 表示继续处理信息 二.验证 是否安装成 ...

  5. Go语言标准库之flag

    Go语言内置的flag包实现了命令行参数的解析,flag包使得开发命令行工具更为简单. os.Args 如果你只是简单的想要获取命令行参数,可以像下面的代码示例一样使用os.Args来获取命令行参数. ...

  6. Go操作kafka

    Kafka是一种高吞吐量的分布式发布订阅消息系统,它可以处理消费者规模的网站中的所有动作流数据,具有高性能.持久化.多副本备份.横向扩展等特点.本文介绍了如何使用Go语言发送和接收kafka消息. s ...

  7. webpack中clean-webpack-plugin插件使用遇到的问题及解决方法

    webpack 会生成文件,然后将这些文件放置在 /dist 文件夹中,但是 webpack 无法追踪到哪些文件是实际在项目中用到的. 通常,在每次构建前清理 /dist 文件夹,是比较推荐的做法,因 ...

  8. Redis继续学习

    1.Redis一共16个数据库 # Set the number of databases. The , you can select # a different one on a per-conne ...

  9. 基于redis(订阅发布)实现python和java进程间通信

    主要结构为: python进程发布消息,java进程订阅消息. 依赖环境: python:   pip install redis java:  jedis 1. python端: PubSub.py ...

  10. .Net Standard(.Net Core)实现获取配置信息

    一.前言 在.Net Framework框架有专门获取webconfig配置的方法供我们使用,但是在.Net Core或者.Net Standard中没有可以直接使用的方法来获取配置文件信息,下面就来 ...