html+javascript实现可拖动可提交的弹出层对话框效果


Posted in Javascript onAugust 05, 2013
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<title>JAVASCRIPT弹出层</title> 
<META http-equiv=Content-Type content="text/html; charset=utf-8"> 
<style> 
#popDiv { 
position: absolute; 
visibility: hidden; 
overflow: hidden; 
border: 2px solid #AEBBCA; 
background-color: #EEF1F8; 
cursor: move; 
padding: 1px; 
} #popTitle { 
background: #9DACBF; 
height: 20px; 
line-height: 20px; 
padding: 1px; 
} 
#popForm { 
padding: 2px; 
} 
.title_left { 
font-weight: bold; 
padding-left: 5px; 
float: left; 
} 
.title_right { 
float: right; 
} 
#popTitle .title_right a { 
color: #000; 
text-decoration: none; 
} 
#popTitle .title_right a:hover { 
text-decoration: underline; 
color: #FF0000; 
} 
</style> 
<script> 
function showPopup() {//弹出层 
var objDiv = document.getElementById("popDiv"); 
objDiv.style.top = "50px";//设置弹出层距离上边界的距离 
objDiv.style.left = "200px";//设置弹出层距离左边界的距离 
objDiv.style.width = "300px";//设置弹出层的宽度 
objDiv.style.height = "200px";//设置弹出层的高度 
//objDiv.style.display = "block"; 
objDiv.style.visibility = "visible"; 
} 
function hidePopup() {//关闭层 
var objDiv = document.getElementById("popDiv"); 
objDiv.style.visibility = "hidden"; 
} 
</script> 
</head> 
<body> 
<div id="popDiv"> 
<div id="popTitle"> <!-- 标题div --> 
<span class="title_left">修改操作</span> <span class="title_right"><a 
href="#" onclick="hidePopup();">关闭</a> </span> 
</div> 
<div id="popForm"> <!-- 表单div --> 
<form action="insert_map.jsp" method="post"> 
<p> 
      ID :<input type="text" name="id" value="0" /> </br> 
名    称 :<input type="text" name="name" value="aaa" /> </br> 
电压等级 :<input type="text" name="voltage_level" value="110kv" /> </br> 
经    度 :<input type="text" name="lon" value="121." /> </br> 
纬    度 :<input type="text" name="lat" value="28." /> </br> 
</p> 
   <input type="submit" value="提交" />   
   <input type="reset" value="重置" />   
   <input type="reset" value="取消" onclick="hidePopup()" /> 
</form> 
</div> 
</div> 
<p> 
<input name="" type="button" onclick="showPopup()" value="操作" /> 
</p> 
<script type="text/javascript"> 
/*-------------------------鼠标左键拖动---------------------*/ 
/*--------当不需要实现此功能时,可以将这一部分代码删除------------*/ 
var objDiv = document.getElementById("popDiv"); 
var isIE = document.all ? true : false;//判断浏览器类型 
document.onmousedown = function(evnt) {//当鼠标左键按下后执行此函数 
var evnt = evnt ? evnt : event; 
if (evnt.button == (document.all ? 1 : 0)) { 
mouseD = true;//mouseD为鼠标左键状态标志,为true时表示左键被按下 
} 
} 
objDiv.onmousedown = function(evnt) { 
objDrag = this;//objDrag为拖动的对象 
var evnt = evnt ? evnt : event; 
if (evnt.button == (document.all ? 1 : 0)) { 
mx = evnt.clientX; 
my = evnt.clientY; 
objDiv.style.left = objDiv.offsetLeft + "px"; 
objDiv.style.top = objDiv.offsetTop + "px"; 
if (isIE) { 
objDiv.setCapture(); 
//objDiv.filters.alpha.opacity = 50;//当鼠标按下后透明度改变 
} else { 
window.captureEvents(Event.MOUSEMOVE);//捕获鼠标拖动事件 
//objDiv.style.opacity = 0.5;//当鼠标按下后透明度改变 
} 
} 
} 
document.onmouseup = function() { 
mouseD = false;//左键松开 
objDrag = ""; 
if (isIE) { 
objDiv.releaseCapture(); 
//objDiv.filters.alpha.opacity = 100;//当鼠标左键松开后透明度改变 
} else { 
window.releaseEvents(objDiv.MOUSEMOVE);//释放鼠标拖动事件 
//objDiv.style.opacity = 1;//当鼠标左键松开后透明度改变 
} 
} 
document.onmousemove = function(evnt) { 
var evnt = evnt ? evnt : event; 
if (mouseD == true && objDrag) { 
var mrx = evnt.clientX - mx; 
var mry = evnt.clientY - my; 
objDiv.style.left = parseInt(objDiv.style.left) + mrx + "px"; 
objDiv.style.top = parseInt(objDiv.style.top) + mry + "px"; 
mx = evnt.clientX; 
my = evnt.clientY; 
} 
} 
</script> 
</body> 
</html>

效果如下图:
html+javascript实现可拖动可提交的弹出层对话框效果
Javascript 相关文章推荐
解javascript 混淆加密收藏
Jan 16 Javascript
推荐 21 款优秀的高性能 Node.js 开发框架
Aug 18 Javascript
jQuery 和 CSS 的文本特效插件集锦
Dec 12 Javascript
jQuery实现图片与文字描述左右滑动自动切换的方法
Jul 27 Javascript
jQuery过滤HTML标签并高亮显示关键字的方法
Aug 07 Javascript
使用JavaScript脚本判断页面是否在微信中被打开
Mar 06 Javascript
JS实现将Asp.Net的DateTime Json类型转换为标准时间的方法
Aug 02 Javascript
jQuery实现隔行变色的方法分析(对比原生JS)
Nov 18 Javascript
使用base64对图片的二进制进行编码并用ajax进行显示
Jan 03 Javascript
在AngularJs中设置请求头信息(headers)的方法及不同方法的比较
Sep 04 Javascript
KOA+egg.js集成kafka消息队列的示例
Nov 09 Javascript
解决Vue.js应用回退或刷新界面时提示用户保存修改问题
Nov 24 Javascript
一款jquery特效编写的大度宽屏焦点图切换特效的实例代码
Aug 05 #Javascript
jquery网页元素拖拽插件效果及实现
Aug 05 #Javascript
jquery mobile实现拨打电话功能的几种方法
Aug 05 #Javascript
js 判断计算字符串长度/判断空的简单方法
Aug 05 #Javascript
javascript显示用户停留时间的简单实例
Aug 05 #Javascript
javascript获取鼠标位置部分的实例代码(兼容IE,FF)
Aug 05 #Javascript
JS字符串处理实例代码
Aug 05 #Javascript
You might like
1 Tube Radio
2021/03/02 无线电
ThinkPHP 表单自动验证运用示例
2014/10/13 PHP
PHP数组操作类实例
2015/07/11 PHP
thinkphp查询,3.X 5.0方法(亲试可行)
2017/06/17 PHP
浅谈PHP中如何实现Hook机制
2017/11/14 PHP
PHPUnit测试私有属性和方法功能示例
2018/06/12 PHP
javascript字典探测用户名工具
2006/10/05 Javascript
JQuery onload、ready概念介绍及使用方法
2013/04/27 Javascript
如何设置iframe高度自适应在跨域情况下的可用方法
2013/09/06 Javascript
jQuery 中$(this).index与$.each的使用指南
2014/11/20 Javascript
jQuery选择器全集详解
2014/11/24 Javascript
jQuery中on()方法用法实例详解
2015/02/06 Javascript
javascript中使用未定义变量或值的情况分析
2016/07/19 Javascript
JavaScript使用原型和原型链实现对象继承的方法详解
2017/04/05 Javascript
Angular2使用Guard和Resolve进行验证和权限控制
2017/04/24 Javascript
使用jQuery实现简单的tab框实例
2017/08/22 jQuery
JavaScript时间戳与时间日期间相互转换
2017/12/11 Javascript
100行代码实现一个vue分页组功能
2018/11/06 Javascript
js canvas实现画图、滤镜效果
2018/11/27 Javascript
vue中node_modules中第三方模块的修改使用详解
2019/05/31 Javascript
[00:43]DOTA2小紫本全民票选福利PA至宝全方位展示
2014/11/25 DOTA
讲解python参数和作用域的使用
2013/11/01 Python
Python IDE环境之 新版Pycharm安装详细教程
2020/03/05 Python
Python用摘要算法生成token及检验token的示例代码
2020/12/01 Python
浅谈HTML5 FileReader分布读取文件以及其方法简介
2017/11/09 HTML / CSS
HTML5自定义mp3播放器源码
2020/01/06 HTML / CSS
巴西图书和电子产品购物网站:Saraiva
2017/06/07 全球购物
美国眼镜网:GlassesUSA
2017/09/07 全球购物
IRO美国官网:法国服装品牌
2018/03/06 全球购物
英国领先的新鲜松露和最好的松露产品供应商:TruffleHunter
2019/08/26 全球购物
iKRIX意大利网上商店:男女豪华服装和配件
2019/10/09 全球购物
某公司部分笔试题
2013/11/05 面试题
益达广告词
2014/03/14 职场文书
出纳试用期自我鉴定
2014/04/07 职场文书
毕业论文指导教师评语
2014/12/30 职场文书
Python Matplotlib绘制条形图的全过程
2021/10/24 Python