JS学习笔记(模态框JS传参)
博主最近基于django框架的平台第一版差不多完成了
今天整理下开发过程中遇到的前端知识
基于前端bootstrap框架模态框传参问题
上前端html代码:
<div class="modal modal-info fade" id="modal-info">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span></button>
<h4 class="modal-title">确认</h4>
</div>
<div class="modal-body">
<p>是否确认运行任务</p>
</div>
<div class="modal-footer">
<a href="#" class="btn btn-outline pull-left" id="path">确认</a>
<button type="button" class="btn btn-outline " data-dismiss="modal">取消</button>
</div>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
</div>
<!-- /.modal -->
上js代码:
<script>
$('#modal-info').on('show.bs.modal', function (event) {
var btnThis = $(event.relatedTarget); //触发事件的按钮
var modal = $(this); //当前模态框
var id = btnThis.data('id'); //解析出data-id的内容
var path = '/run/{{ project_id }}/'+id; //组装路由
console.log('taskId:', id);
console.log('path:', path);
document.getElementById("path").href=path; //给id=path的元素赋值href;
}); </script>
JS学习笔记(模态框JS传参)的更多相关文章
- WebGL three.js学习笔记 创建three.js代码的基本框架
WebGL学习----Three.js学习笔记(1) webgl介绍 WebGL是一种3D绘图协议,它把JavaScript和OpenGL ES 2.0结合在一起,通过增加OpenGL ES 2.0的 ...
- Node.js学习笔记(1) - Node.js简介
近期在看一些Node.js的知识,看完后觉得,一些前面的东西忘记了,于是整理一下,方便自己查阅,也希望对学习Node.js的朋友有些帮助: 当然以下只是我个人的观点和理解,不喜勿喷,也望大神指教. 一 ...
- Node.js学习笔记(2) - Node.js安装及入门hello world
今天来简单的记录一下Node.js的安装配置以及简单的入门 一.Node.js的安装 1.windows下的安装 windows下的安装很简单,只需要去官网http://nodejs.org中,找到w ...
- Node.js学习笔记(八) --- Node.js的路由模块封装
1 .模块化的方式封装 整理中… 2 .封装仿照 express 的路由整理中…
- Node.js学习笔记(七) --- Node.js的静态文件托管、路 由、EJS 模板引擎、GET 、POST
1 . Nodejs 静态文件托管静态 web 服务器封装 2 . 路由 官方解释: 路由(Routing)是由一个 URI(或者叫路径)和一个特定的 HTTP 方法(GET.POST 等)组成的, ...
- 2019-4-29 js学习笔记
js学习笔记一:js数据类型 1:基本数据类型 number类型(整数,小数) String类型 boolean类型 NaN类型其实是一个nu ...
- 基于jquery的插件turn.js学习笔记
基于jquery的插件turn.js学习笔记 简介 turn.js是一个可以实现3d书籍展示效果的jq插件,使用html5和css3来执行效果.可以很好的适应于ios和安卓等触摸设备. How it ...
- Python3+Selenium3+webdriver学习笔记13(js操作应用:弹出框无效如何处理)
#!/usr/bin/env python# -*- coding:utf-8 -*-'''Selenium3+webdriver学习笔记13(js操作应用:弹出框无效如何处理)'''from sel ...
- WebGL three.js学习笔记 使用粒子系统模拟时空隧道(虫洞)
WebGL three.js学习笔记 使用粒子系统模拟时空隧道 本例的运行结果如图: 时空隧道demo演示 Demo地址:https://nsytsqdtn.github.io/demo/sprite ...
随机推荐
- 170606、防止sql注入(三)
SpringMVC利用拦截器防止 SQL注入案例一个简单的PHP登录验证SQL注入 比如一个公司有一个用来管理客户的客户管理系统,在进入后台进行管理的时候需要输入用户名和密码.假设在客户端传给服务器的 ...
- Educational Codeforces Round 29
A. Quasi-palindrome 题目链接:http://codeforces.com/contest/863/problem/A 题目意思:问一个数可不可以在不上一些前缀0以后变成一个回文数. ...
- Java Naming and Directory Interface (JNDI) Java 命名和目录接口
https://www.oracle.com/technetwork/java/jndi/index.html Lesson: Overview of JNDI (The Java™ Tutorial ...
- Spongebob and Squares---cf599D(数学公式1 + (1+2) + (1+2+3) +....)
题目链接:http://codeforces.com/contest/599/problem/D 一个3×5(m×n)的长方形,里面包含15个边长为1的正方形,有8个边长为2的正方形,有3个边长为3的 ...
- UEM用户行为了如指掌!
“千呼万唤始出来”,万众期待的UEM正式与宝宝们见面啦~~~ 今天很多人来问小编,Web咋不见了,表急,Web并没有消失,而是重磅升级为UEM啦!!! 什么是UEM呢?UEM全称User Experi ...
- android 百度地图 No implementation found for int
java.lang.UnsatisfiedLinkError: No implementation found for int com.baidu.platform.comjni.map.common ...
- 1.Anaconda安装Tensorflow报错UnicodeDecodeError: 'utf-8' codec can't decode ## invalid start byte的问题之解决
安装TensorFlow pip install --ignore-installed --upgrade tensorflow 报错: UnicodeDecodeError: 'utf-8' cod ...
- Spark Streaming带状态更新
带状态的更新是使用的updateStateByKey方法,里面传入一个函数,函数要自己写,注意需要设置checkpoint import org.apache.spark.streaming.kafk ...
- Python数据结构:列表、字典、元组、集合
列表:shoplist = ['apple', 'mango', 'carrot', 'banana']字典:di = {'a':123,'b':'something'}集合:jihe = {'app ...
- cocos代码研究(15)Widget子类CheckBox学习笔记
理论基础 复选框是一种特定类型的“两状态”按钮,可以处于“选中”和“未选中状态”.继承自AbstractCheckButton.注 AbstractCheckButton继承自Widget类. 代码部 ...