基于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="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 在同一个界面弹出不同的模态框的更多相关文章
- jQuery制作弹出窗(模态框)
来源:(二少)在南极 ##index.html <!DOCTYPE html><html lang="zh"><head> <meta c ...
- sweetalert2 全面替代 alert ,从 sweetalert2 弹出 text 到 弹出 Dom 以及模态框和取消 sweetalert2 的 OK 按钮
1. 简易基本版 sweetalert 涵盖日常基本的弹出及对话框 2. 升级版本 sweetalert2 满足常见开发工作中的各种要求 3 取消 OK 按钮, 只需要设置 showConfirmBu ...
- element-ui 弹出组件的遮罩层在弹出层dialog模态框的上面
造成的原因: 因为dialog的组件外层div设置了 position:absolute: 属性所以导致遮罩层会在最上面. 解决方法: 在属性内加上这段代码 :append-to-body=&quo ...
- bootstrap中popover.js(弹出框)使用总结+案例
bootstrap中popover.js(弹出框)使用总结+案例 *转载请注明出处: 作者:willingtolove: http://www.cnblogs.com/willingtolove/p/ ...
- 基于Jquery 简单实用的弹出提示框
基于Jquery 简单实用的弹出提示框 引言: 原生的 alert 样子看起来很粗暴,网上也有一大堆相关的插件,但是基本上都是大而全,仅仅几句话可以实现的东西,可能要引入好几十k的文件,所以话了点时间 ...
- 基于jQuery鼠标点击弹出登陆框效果
基于jQuery鼠标点击弹出登陆框效果.这是一款扁平样式风格的jQuery弹出层登陆框特效.效果图如下: 在线预览 源码下载 实现的代码. html代码: <input type=" ...
- 基于js alert confirm样式弹出框
基于js alert confirm样式弹出框.这是一款根据alert confirm优化样式的确认对话框代码. 在线预览 源码下载 实现的代码. html代码: <div id=" ...
- Bootstrap Modal多个弹出层顺序
Bootstrap Modal多个弹出层顺序与div的顺序关联.后来者居上:即div靠后的modal层弹出的时候会在上层. 比如上图所示,模态框2弹出的时候会在模态框1上面.
- 一款基于jquery超炫的弹出层提示消息
今天给大家带来一款基于jquery超炫的弹出层提示消息.这款实例页面初始时,一个go按钮.当单击go按钮时,提示强出层以动画形式出现.效果图如下: 在线预览 源码下载 实现的代码. html代码: ...
随机推荐
- CF - 1107 E Vasya and Binary String DP
题目传送门 题解: dp[ l ][ r ][ k ] 代表的是[l, r]这段区间内, 前面有k-1个连续的和s[l]相同且连续的字符传进来的最大值. solve( l, r, k) 代表的是处理 ...
- codeforces 808 D. Array Division(二分)
题目链接:http://codeforces.com/contest/808/problem/D 题意:有一串长度为n的数组,要求选择一个数字交换它的位置使得这串数能够分成两串连续的和一样的数组. 这 ...
- Codeforces Round #383 (Div. 2) C. Arpa's loud Owf and Mehrdad's evil plan(dfs+数学思想)
题目链接:http://codeforces.com/contest/742/problem/C 题意:题目比较难理解,起码我是理解了好久,就是给你n个位置每个位置标着一个数表示这个位置下一步能到哪个 ...
- 【Offer】[21] 【调整数组顺序使奇数位于偶数前面】
题目描述 思路分析 测试用例 Java代码 代码链接 题目描述 输入一个整数数组,实现一个函数来调整该数组中数字的顺序,使得所有的奇数位于数组的前半部分,所有的偶数位于数组的后半部分,(偶数之间和奇数 ...
- Dijkstra算法的Java实现
package main.java; import main.java.utils.GraphUtil; import java.util.ArrayDeque; import java.util.L ...
- Python批量删除mysql中千万级大量数据
场景描述 线上mysql数据库里面有张表保存有每天的统计结果,每天有1千多万条,这是我们意想不到的,统计结果咋有这么多.运维找过来,磁盘占了200G,最后问了运营,可以只保留最近3天的,前面的数据,只 ...
- SpringBoot启动原理
SpringBoot启动原理 我们开发任何一个Spring Boot项目,都会用到如下的启动类: @SpringBootApplication public class Application { p ...
- Linux MySQL-5.7 root初始密码修改
操作系统为centos7 64 1.修改 /etc/my.cnf,在 [mysqld] 小节下添加一行:skip-grant-tables=1 这一行配置让 mysqld 启动时不对密码进行验证 2. ...
- Day 6 文件属性与命令执行流程
1. 第一列第一个字符 表示文件类型 rw-r--r-- 权限(下周) 4 这个文件被链接次数 root 文件的拥有者(用户) root 文件的拥有组(用户组 ==>家族) 2018 文 ...
- 《Java7并发编程实战手册》读书笔记
一.线程管理 1.线程的创建和运行 创建线程的2种方式: 继承Thread类,并覆盖run()方法 创建一个实现Runnable接口的类.使用带参数的Thread构造器来创建Thread对象 每个Ja ...