//获取绑定的自定义属性值
<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">
&times;
</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)的更多相关文章

  1. 阻止Bootstrap 模态框点击背景空白处自动关闭

    问题描述 模态框点击空白处,会自动关闭,怎么阻止关闭事件呢? 解决方法 在HTML页面中编写模态框时,在div初始化时添加属性 aria-hidden=”true” data-backdrop=”st ...

  2. Bootstrap 模态框在用户点击背景空白处时会自动关闭

    问题: Bootstrap 模态框在用户点击背景空白处时,会自动关闭. 解决方法: 在HTML页面中编写模态框时,在div初始化时添加属性 aria-hidden=”true” data-backdr ...

  3. 小解系列-解决WebUploader在谷歌浏览器下弹出框打开慢,在Bootstrap模态框内部多次点击才能触发的问题

    WebUploader百度前端团队开源的上传组件,用起来感觉真心不错的,标题的两个问题是我实际使用过程中遇到的问题,经过百度和谷歌查到解决方案, 特分享一下,以供遇到此问题的童靴. 谷歌浏览器弹出框打 ...

  4. select2和bootstrap模态框一起使用导致select2的input获取不到焦点问题

      select2和bootstrap模态框一起使用导致select2的input获取不到焦点问题 解决办法: 把页面中的 tabindex="-1" 删掉, 或者值改为1 代码片 ...

  5. 第二百四十三节,Bootstrap模态框插件

    Bootstrap模态框插件 学习要点: 1.基本使用 2.用法说明 本节课我们主要学习一下 Bootstrap 中的模态框插件,这是一款交互式网站非常常见的 弹窗功能插件. 一.基本使用 使用模态框 ...

  6. Bootstrap, 模态框实现值传递,自动勾选

    目录 Bootstrap,模态框自动勾选,值传递 1.父页面 2. 子页面(modal) 模态框 Bootstrap,模态框自动勾选,值传递 场景: ​ 有一个这样的需求, 在父页面有一个table, ...

  7. Bootstrap模态框按钮

    1.触发模态框弹窗的代码 这里复制了一段Bootstrap模态框的代码 <h2>创建模态框(Modal)</h2> <!-- 按钮触发模态框 --> <but ...

  8. Bootstrap 模态框(Modal)插件

    原文链接:http://www.runoob.com/bootstrap/bootstrap-modal-plugin.html Bootstrap 模态框(Modal)插件 模态框(Modal)是覆 ...

  9. Bootstrap模态框(MVC)

    BZ这篇博客主要是为大家介绍一下MVC如何弹出模态框.本文如果有什么不对的地方,希望大神们多多指教,也希望和我一样的小菜多多学习.BZ在这里谢过各位. 首先要在页面加上一个点击事件: @Html.Ac ...

随机推荐

  1. 递归——深度优先搜索(DFS)——以滑雪问题为例(自顶而下)

    一.问题:滑雪 问题描述:小明喜欢滑雪,为了获得速度,滑的区域必须向下倾斜,而且当你滑到坡底,你不得不再次走上坡或者等待升降机来载你.小明想知道在一个区域中最长底滑坡.区域由一个二维数组给出.数组的每 ...

  2. 基于idea做java程序的本地k8s调试-skaffold(二)

    上一篇讲完了java代码发到本机minikube中run,这篇来讲讲minkube中进行debug(idea下) 话说,上篇是把pigx基础infra微服务都发到了minikube中,这些微服务是ru ...

  3. LGP5824口胡

    万 恶 之 源 十 二 重 计 数 法 先鸽子了 球有序,盒子有序 答案明显为 \(m^n\). 球有序,盒子有序,每个盒子最多放一个 答案明显为 \(\binom{m}{n}n!\). 球有序,盒子 ...

  4. 构建 Go 应用 docker 镜像的十八种姿势

    修炼背景 我夜以继日,加班加点开发了一个最简单的 Go Hello world 应用,虽然只是跑了打印一下就退出了,但是老板也要求我上线这个我能写出的唯一应用. 项目结构如下: . ├── go.mo ...

  5. 5月4日 python学习总结 socketserver

    一.socketserver SocketServer简化了网络服务器的编写. 它有4个类:TCPServer,UDPServer,UnixStreamServer,UnixDatagramServe ...

  6. phpstudy、Apache安装DVWA教程

    1.下载DVWA(http://www.dvwa.co.uk/) 2.解压缩DVWA安装包到服务器的目录下 Apache: \Apache24\htdocs phpStudy: \PHPTutoria ...

  7. Github使用指南(学习中随时更新)

    注册好一个账号后先创建一个仓库 点击"Create repository"创建一个版本库 填好带*号的必填项,选择是要公开仓库还是私人使用,勾选自动添加README选项 READM ...

  8. request和response——请求响应对象

    请求对象--request 获取get请求的值 一次请求,返回一个响应. 地址栏:http://127.0.0.1:8000/day3/get_request?lan=python 问号:代表请求参数 ...

  9. 还在担心CC攻击? 让我们来了解它, 并尽可能将其拒之服务之外.

    还在担心CC攻击? 让我们来了解它, 并尽可能将其拒之服务之外. CC攻击是什么? 基本原理 CC原名为ChallengeCollapsar, 这种攻击通常是攻击者通过大量的代理机或者肉鸡给目标服务器 ...

  10. UNIX网络编程--学习日记

    今天在学习accept函数的时候,在执行服务器程序的时候,碰到了如下的出错信息: bind error: Address already in use 其原因在于服务器程序使用了13号的端口; 然而在 ...