获取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 ...
随机推荐
- 公司内部一次关于OOM故障复盘分享
最近笔者有点忙,这次OOM事故发生过去两周前,记得笔者那天正带着家人在外地玩,正中午跟友人吃饭的时候,钉钉连续告警爆表,接着就是钉钉电话(显示广东抬头)一看就知道BBQ了,又一次故障发生了,今天把那次 ...
- laravel7 jqAjax下拉框搜索
html: 设置页面改变事件 <div id="show"> <div class="page-container" style=" ...
- social network 中Clustering Coefficient 相关笔记2
breath_first search 改变了原图的连接情况.
- Net中委托之三委托的高级应用
1. 使用委托来解决逻辑分离,解除耦合 2.委托的高级应用实例 using System; using System.Collections.Generic; using System.Linq; u ...
- 《手把手教你》系列基础篇(八十)-java+ selenium自动化测试-框架设计基础-TestNG依赖测试-番外篇(详解教程)
1.简介 经过前边几篇知识点的介绍,今天宏哥就在实际测试中应用一下前边所学的依赖测试.这一篇主要介绍在TestNG中一个类中有多个测试方法的时候,多个测试方法的执行顺序或者依赖关系的问题.如果不用de ...
- Termux镜像在阿里云镜像站首发上线
镜像下载.域名解析.时间同步请点击阿里云开源镜像站 简介 Termux 是 Android 平台上的一个终端模拟器,它将众多 Linux 上运行的软件和工具近乎完美的移植到了手机端. 无需任何复杂的安 ...
- 团队vue基础镜像选择思考
前端镜像可以考虑使用nginx或者openresty; 镜像 大小 说明 nginx:1.20.2-alpine 8.41 MB 最小最新版本 nginx:1.21.4 50.95 MB 最新版本 n ...
- B树、B+树、B*树三者的对比详解
转载至:https://www.2cto.com/database/201805/745822.html 对比 B+树是B树的变体,B*树又是B+树的变体,是一脉相承法治国拉的,不断解决新一阶段的问题 ...
- Java BlockingQueue是什么?
Java BlockingQueue是一个并发集合util包的一部分.BlockingQueue队列是一种支持操作,它等待元素变得可用时来检索,同样等待空间可用时来存储元素.
- Bean 工厂和 Application contexts 有什么区别?
Application contexts提供一种方法处理文本消息,一个通常的做法是加载文件资源(比如镜像),它们可以向注册为监听器的bean发布事件.另外,在容器或容器内的对象上执行的那些不得不由be ...