[JavaScript] 弹出编辑框
效果:单击图片copy,双击图片或者点Edit都会打开编辑窗口
Style
<style>
.black_overlay{ display: none; position: absolute; top: 0%; left: 0%; width: 100%; height: 100%; background-color: black; z-index:1001; -moz-opacity: 0.6; opacity:.60; filter: alpha(opacity=60); }
.white_content{ display: none; position: absolute; top: 25%; left: 25%; width: 50%; height: 50%; padding: 16px; border: 16px solid orange; background-color: white; z-index:1002; overflow: auto; }
</style>
Script
<script type="text/javascript">
var timer = 0;
var delay = 200;
var prevent = false;
function singleClick(id)
{
clearTimeout(timer);
timer = setTimeout(function() {
if (!prevent) {copy(id);}
prevent = false;
},delay); //“200”单位是毫秒
} function dbClick(id1,id2)
{
clearTimeout(timer);
prevent = true;
openEditWindow();
} function copy(id)
{
var textInComment = document.getElementById(id).title;
var oInput = document.createElement('input');
oInput.value = textInComment;
document.body.appendChild(oInput);
oInput.select(); // 选择对象
document.execCommand("Copy"); // 执行浏览器复制命令
oInput.className = 'oInput';
oInput.style.display='none';
alert("Copy success, you can paste it!");
} function openEditWindow(){
document.getElementById('light').style.display='block';
document.getElementById('fade').style.display='block'
}
function closeEditWindow(){
document.getElementById('light').style.display='none';
document.getElementById('fade').style.display='none'
}
</script>
HTML
<img src="{% static 'images/comment.png' %}" id="{{forloop.parentloop.counter}}{{forloop.counter}}" onclick="singleClick('{{forloop.parentloop.counter}}{{forloop.counter}}')" ondblclick="dbClick()" title='{{v2.comment}}' height="30" width="30" >
<a href="javascript:void(0)" onclick="openEditWindow()">Edit</a>
<div id="light" class="white_content">
<textarea class="form-control" name="surveyComment" id="comment" rows="17" placeholder="Please write some comment here."></textarea>
<a href="javascript:void(0)" onclick="closeEditWindow()">Close</a>
</div>
<div id="fade" class="black_overlay">
</div>
[JavaScript] 弹出编辑框的更多相关文章
- datatables.js 简单使用--弹出编辑框或添加数据框
内容:选中某一条记录,弹出编辑框 环境:asp.net mvc , bootstrap 显示效果: 代码: 至于怎么弄多选框,在上一篇博客里已经有说明. 主要用到了bootstrap的模态窗,下面代 ...
- 第一百三十三节,JavaScript,封装库--弹出登录框
JavaScript,封装库--弹出登录框 封装库,增加了两个方法 yuan_su_ju_zhong()方法,将获取到的区块元素居中到页面,chuang_kou_shi_jian()方法,浏览器窗口事 ...
- 练习:javascript弹出框及地址选择功能,可拖拽
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- JavaScript:用JS实现加载页面前弹出模态框
用JS实现加载页面前弹出模态框 主要的JavaScript 代码是: <script> //加载模态框 $('#myModal').modal(); $(document).ready(f ...
- 请写出一段JavaScript代码,要求页面有一个按钮,点击按钮弹出确认框。程序可以判断出用
请写出一段JavaScript代码,要求页面有一个按钮,点击按钮弹出确认框.程序可以判断出用 户点击的是“确认”还是“取消”. 解答: <HTML> <HEAD> <TI ...
- 【JavaScript 12—应用总结】:弹出登录框
导读:上篇博客中,做好了个人中心的下拉菜单,这次,将做每个网站都会有的一个登录功能,以此类推,可以做出别的想要的弹出框,如错误提示啦,或者注册. 一.实现分析 首先:和下拉菜单一样,需要通过CSS样式 ...
- 从头开始一步一步实现EF6+Autofac+MVC5+Bootstarp极简前后台ajax表格展示及分页(二)前端修改、添加表格行点击弹出模态框
在前一篇中,由于不懂jquery,前端做的太差了,今天做稍做修改,增加一个跳转到指定页面功能,表格行点击样式变化.并且在表格中加入bootstarp的按钮组,按钮点击后弹出模态框,须修改common, ...
- [转]js中confirm实现执行操作前弹出确认框的方法
原文地址:http://www.jb51.net/article/56986.htm 本文实例讲述了js中confirm实现执行操作前弹出确认框的方法.分享给大家供大家参考.具体实现方法如下: 现在在 ...
- [转] 在Asp.net前台和后台弹出提示框
一.在前台弹出提示框 1.点击"A"标记或者"控件按钮"弹出提示框 <asp:LinkButton ID="lbtnDel" runa ...
随机推荐
- IntelliJ IDEA 打开项目红色
项目目录红色主要是有版本控制所导致的,解决办法就是解除版本控制 点击File->Settings...->Version Control 项目会重新编译,项目目录红色会消失
- LeetCode 112. Path Sum 二叉树的路径和 C++
Given a binary tree and a sum, determine if the tree has a root-to-leaf path such that adding up all ...
- SQLALchemy中关于复杂关系表模型的映射处理
映射在第五步,我们还是一步一步来哈 一. 关系介绍 举一个比较经典的关系,部门与员工(以下是我的需求情况,算是把该有的关系都涉及到了) 1.每个部门会有很多成员(这里排除一个成员属于多个部门的情况) ...
- winreg操作windows注册表详解示例
#coding:utf-8 #=====================================================================#=====本程序演示了WINR ...
- Swoft 缓存及Redis使用
配置 修改 /config/properties/cache.php 文件 return [ 'redis' => [ 'name' => 'redis', 'uri' => [ ' ...
- 深度学习原理与框架-图像补全(原理与代码) 1.tf.nn.moments(求平均值和标准差) 2.tf.control_dependencies(先执行内部操作) 3.tf.cond(判别执行前或后函数) 4.tf.nn.atrous_conv2d 5.tf.nn.conv2d_transpose(反卷积) 7.tf.train.get_checkpoint_state(判断sess是否存在
1. tf.nn.moments(x, axes=[0, 1, 2]) # 对前三个维度求平均值和标准差,结果为最后一个维度,即对每个feature_map求平均值和标准差 参数说明:x为输入的fe ...
- activiti官网实例项目activiti-explorer之获取流程节点
如上图在保存步骤中添加获取节点信息方法nodes(); 方法如下: //获取所有节点 JsonNode modelNode = new ObjectMapper().readTree(repos ...
- 2017-11-11 Sa Oct 消参
2017-11-11 Sa Oct 消参 Prior versions: 2017-11-04 Sa Oct 消参 2017-11-10 Fr Oct 消参 2017-11-04 Sa $ P(-3, ...
- Serv-U 配置说明(虚拟路径、网络驱动器、个人文件夹,数据库管理)
实现效果 1.用户数据存在数据库,可以自己修改. 2.支持匿名用户使用部分功能 3.每个用户均有私人文件夹,可以自己存放文件 4.FTP内主要的文件都在存储内,不存在服务器上 匿名用户访问情况: 普通 ...
- ArcGIS按选定线分割面-案例教程
ArcGIS按选定线分割面-案例教程 联系方式:谢老师,135-4855-4328,xiexiaokui#qq.com 功能 方法:高级编辑 实例: 分割前后 联系方式:谢老师,135-4855-43 ...