[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 ...
随机推荐
- ubuntu10.04 搭建海思开发环境
(1)Ubuntu 10.04.4 LTS (Lucid Lynx) 下载地址:http://old-releases.ubuntu.com/releases/lucid/ (2)passwd roo ...
- 记数据库数据文件损坏恢复ORA-00376+ORA-01110
现象:业务平台无法登陆,日志报错为ORACLE的错误. 查看oracle日志的报错, ORA-00376: file 5 cannot be read at this time ORA-01110: ...
- MySQL sql_mode 说明(及处理一起 sql_mode 引发的问题)(转)
1. MySQL莫名变成了 Strict SQL Mode 最近测试组那边反应数据库部分写入失败,app层提示是插入成功,但表里面里面没有产生数据,而两个写入操作的另外一个表有数据.因为 insert ...
- MySql数据库时区异常,java.sql.SQLException: The server time zone value '?й???׼ʱ?' is unrecognized or represents more than one time zone.
JDBC访问MySql异常 Exception in thread "main" org.apache.ibatis.exceptions.PersistenceException ...
- K数和问题
问题描述 给定n个不同的正整数(数组num),整数k(k < = n)以及一个目标数字target.在这n个数里面找出k个数,使得这k个数的和等于目标数字,求问有多少种方案? 解决思路 该类问题 ...
- C Mergeable Stack(list超好用)
ZOJ 4016 list用法https://www.cnblogs.com/LLLAIH/p/10673068.html 一开始用普通的栈做,超内存,链表模拟栈也没写出来orz.补题发现list超 ...
- VirtualBox虚拟机网络设置说明
1. 网络接入模式简介 VirtualBox的提供了四种网络接入模式,它们分别是: 1.NAT 网络地址转换模式(NAT,Network Address Translation) ...
- GDI+_从Bitmap里得到的Color数组值解决方案
' InkHin_ZhiZhuo ' Date :2019.2.18 ' E-mail lqx@tyningling.Top 'This function and Module is written ...
- SQL Server并发操作单个表时发生在page页面级的死锁
最近遇到的死锁问题都发生在并发操作单张表上,比较有意思,就模拟了重现了一下.根据非聚集索引为条件,删除某一个表的数据,类似于这么一个语句,delete from table where noclust ...
- 20175213 2018-2019-2 《Java程序设计》第4周学习总结
## 教材学习内容总结 在第四周的学习过程中,我学习了第五章的内容. 第五章内容总结: 1.子类继承的方法只能操作子类继承和隐藏的成员变量. 2.子类和父类在同一包的继承性 子类自然继承了其父类中不是 ...