获取bootstrap模态框点击的对应项(e.relatedTarget.dataset)
//获取绑定的自定义属性值
<ul>
<li data-toggle="modal" data-index="电表1111" data-target="#myModal">电表1111</li>
<li data-toggle="modal" data-index="电表2222" data-target="#myModal">电表2222</li>
<li data-toggle="modal" data-index="电表3333" data-target="#myModal">电表333</li>
<li data-toggle="modal" data-index="电表4444" data-target="#myModal">电表4444</li>
<li data-toggle="modal" data-index="电表5555" data-target="#myModal">电表555</li>
<li data-toggle="modal" data-index="电表6666" data-target="#myModal">电表666</li>
</ul>
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
×
</button>
<div class="title-sky">电表</div>
<div>2019-07-18 10:43</div>
<div class="modelOne">
<div class="modelOne-info">
<div>功率: <span>100</span> </div>
<div>状态: <span>正常</span> </div>
<div>用电量: <span>100</span> </div>
<div>编号: <span>MAC123123</span> </div>
</div>
<div class="modelOne-address">
<span style="display:inline-block;width:13px;height:13px;border-radius:50%;background:#5896F7;position: relative;top: 1px;"></span>
中电科智慧产业园8号楼二楼
<span class="showmyChart" style="float:right;color:#5896F7;cursor: pointer;">历史数据 <span class="glyphicon glyphicon-triangle-bottom"></span> </span>
</div>
<div style="width:100%">
<div id="myChart_one" class="myChart_one_show" style="width:300px;height:150px"></div>
</div>
</div>
</div>
</div>
//重点:e.relatedTarget.dataset
$('#myModal').on('show.bs.modal', function (e) {
console.log(e)
console.log(e.relatedTarget.dataset.index)
$('.title-sky').html(e.relatedTarget.dataset.index)
})
获取bootstrap模态框点击的对应项(e.relatedTarget.dataset)的更多相关文章
- 阻止Bootstrap 模态框点击背景空白处自动关闭
问题描述 模态框点击空白处,会自动关闭,怎么阻止关闭事件呢? 解决方法 在HTML页面中编写模态框时,在div初始化时添加属性 aria-hidden=”true” data-backdrop=”st ...
- Bootstrap 模态框在用户点击背景空白处时会自动关闭
问题: Bootstrap 模态框在用户点击背景空白处时,会自动关闭. 解决方法: 在HTML页面中编写模态框时,在div初始化时添加属性 aria-hidden=”true” data-backdr ...
- 小解系列-解决WebUploader在谷歌浏览器下弹出框打开慢,在Bootstrap模态框内部多次点击才能触发的问题
WebUploader百度前端团队开源的上传组件,用起来感觉真心不错的,标题的两个问题是我实际使用过程中遇到的问题,经过百度和谷歌查到解决方案, 特分享一下,以供遇到此问题的童靴. 谷歌浏览器弹出框打 ...
- select2和bootstrap模态框一起使用导致select2的input获取不到焦点问题
select2和bootstrap模态框一起使用导致select2的input获取不到焦点问题 解决办法: 把页面中的 tabindex="-1" 删掉, 或者值改为1 代码片 ...
- 第二百四十三节,Bootstrap模态框插件
Bootstrap模态框插件 学习要点: 1.基本使用 2.用法说明 本节课我们主要学习一下 Bootstrap 中的模态框插件,这是一款交互式网站非常常见的 弹窗功能插件. 一.基本使用 使用模态框 ...
- Bootstrap, 模态框实现值传递,自动勾选
目录 Bootstrap,模态框自动勾选,值传递 1.父页面 2. 子页面(modal) 模态框 Bootstrap,模态框自动勾选,值传递 场景: 有一个这样的需求, 在父页面有一个table, ...
- Bootstrap模态框按钮
1.触发模态框弹窗的代码 这里复制了一段Bootstrap模态框的代码 <h2>创建模态框(Modal)</h2> <!-- 按钮触发模态框 --> <but ...
- Bootstrap 模态框(Modal)插件
原文链接:http://www.runoob.com/bootstrap/bootstrap-modal-plugin.html Bootstrap 模态框(Modal)插件 模态框(Modal)是覆 ...
- Bootstrap模态框(MVC)
BZ这篇博客主要是为大家介绍一下MVC如何弹出模态框.本文如果有什么不对的地方,希望大神们多多指教,也希望和我一样的小菜多多学习.BZ在这里谢过各位. 首先要在页面加上一个点击事件: @Html.Ac ...
随机推荐
- 【笔记】封神榜游戏设计VR
一.添加怪物(这个教程的鬼兵我可以用)1.设置怪物出生点.2.创建一个新脚本-CreateMonster,写好脚本之后放到3个传送门上.3.然后添加完成后,给三个添加Audio Source组件4.可 ...
- 权限命令 vi编辑器 命令模式 使用技巧
一.长格式由七部分组成 权限 引用数字 所有者 所属组 文件大小 时间 名称 如 dr-xr-xr-x 5 root root 409 ...
- Docker——容器数据卷
为什么需要容器数据卷 角度:遇到问题,尝试以朴素的道理解决问题.问题复杂化,解决的方式也变得复杂 问题的提出:docker将应用和环境打包成一个镜像,但是对于容器内的数据,如果不进行外部的保存,那么当 ...
- 想让DBA瞬间崩溃,那就让他去做SQL性能优化
摘要:很多大数据计算都是用 SQL 实现的,跑得慢时就要去优化 SQL,但常常碰到让人干瞪眼的情况. 本文分享自华为云社区<做 SQL 性能优化真是让人干瞪眼>,作者: 石臻臻的杂货铺 . ...
- 切换阿里巴巴开源镜像站镜像——Kali镜像
参考链接: 阿里巴巴开源镜像站 镜像切换参考链接:阿里云Kali镜像源 安装Kali Linux系统参考链接:使用VMware虚拟机安装kali Linux 一.打开终端命令窗口 二.进入source ...
- 盘点|2021年最受欢迎Linux桌面操作系统前十名
镜像下载.域名解析.时间同步请点击 阿里云开源镜像站 阿里云开源镜像站利用云服务上的优势,提供快速.稳定的镜像分发服务.和免费的CDN加速服务.更新频率高,基本上一天一更新,对于Centos/Ubun ...
- mock axios vue的数据传递关系
最近有一个项目要快速出一个前端demo,选择了vue-element框架(虽然其实很想用react,但是为了求快) 本人的基础只有初级的html/css/js知识,和python后端的一些简单工作,和 ...
- bzoj4241/AT1219 历史研究(回滚莫队)
bzoj4241/AT1219 历史研究(回滚莫队) bzoj它爆炸了. luogu 题解时间 我怎么又在做水题. 就是区间带乘数权众数. 经典回滚莫队,一般对于延长区间简单而缩短区间难的莫队题可以考 ...
- 【仿真】Carla之收集数据快速教程 (附完整代码) [7]
收集过程可视化展示,随后进入正文: 参考与前言 看到仿真群对这类任务下(用carla收集数据然后再做训练等) 需求量大,顺手马上写一个好了,首先收集数据需要考虑清楚: 收集什么数据,需要什么样的数据格 ...
- CEPH-2:rbd功能详解及普通用户应用ceph集群
ceph集群rbd使用详解 一个完整的ceph集群,可以提供块存储.文件系统和对象存储. 本节主要介绍rbd存储功能如何灵活的使用,集群背景: $ ceph -s cluster: id: 53717 ...