//获取绑定的自定义属性值
<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. SpringCloudStream(RabbitMQ&Kafka)&Spring-Kafka配置使用

    目录 是什么 解决问题 使用方式 创建生产者项目 pom yml 生产消息方法 接口 实现 创建消费者项目 pom yml 接收消息方法 重复消费 消费者yml 持久化 消费者负载个性配置(预拉取) ...

  2. tp 防止xss攻击

    跨站脚本攻击(Cross Site Scripting),攻击者往Web页面里插入恶意Script代码,当用户浏览该页之时,嵌入其中Web里面的Script代码会被执行,从而达到恶意攻击用户的目的. ...

  3. linux 系统 解决php -v查看到版本于phpinfo()打印的版本不一致问题

    发现问题的原因: 安装zip扩展后,配置成功,但是使用gitlab合并的时候发生错误,经检查,使用phpinfo打印出来的php版本为7.1,而使用linux度服务器 运行 php -v的版本却是5. ...

  4. Unknown column ‘avatar_url‘ in ‘field list‘

    报错: Unknown column 'avatar_url' in 'field list' 解决: 查看mysql数据库中字段名前面是否有空格或则换行

  5. PO模式在selenium自动化测试框架有什么好处

    PO模式是在UI自动化测试过程当中使用非常频繁的一种设计模式,使用这种模式后,可以有效的提升代码的复用能力,并且让自动化测试代码维护起来更加方便. PO模式的全称叫page object model( ...

  6. Gin 09 HTTP 重定向

    gin http 重定向有两种方法,重写url 和 不重写的跳转.两种方法,gin 通过两个内置方法实现: demo package main import ( "github.com/gi ...

  7. location 匹配规则

    location 匹配规则 语法规则 location [=||*|^~] /uri/ { - } 模式 含义 location = /uri = 表示精确匹配,只有完全匹配上才能生效 locatio ...

  8. json.dumps参数之解

    宝藏参数,懂的都懂^-^ 说明:编译后print()打印内容,此内容以字符串紧凑输出,且无顺序,中文不可读..   应用:使用pycharm做接口测试时,print()打印出的接口下行,如下图:   ...

  9. 为什么等待和通知是在 Object 类而不是 Thread 中声明的?

    一个棘手的 Java 问题,如果 Java编程语言不是你设计的,你怎么能回答这个问题呢.Java编程的常识和深入了解有助于回答这种棘手的 Java 核心方面的面试问题.为什么 wait,notify ...

  10. 编写 Java 程序时, 如何在 Java 中创建死锁并修复它?

    经典但核心Java面试问题之一.如果你没有参与过多线程并发 Java 应用程序的编码,你可能会失败.