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 相关文章推荐
ie focus bug 解决方法
Sep 03 Javascript
JavaScript 学习笔记(十六) js事件
Feb 01 Javascript
dess中一个简单的多路委托的实现
Jul 20 Javascript
DOM_window对象属性之--clipboardData对象操作代码
Feb 03 Javascript
js switch case default 的用法示例介绍
Oct 23 Javascript
web前端设计师们常用的jQuery特效插件汇总
Dec 07 Javascript
JQuery获取鼠标进入和离开容器的方向
Dec 29 Javascript
JS+html5 canvas实现的简单绘制折线图效果示例
Mar 13 Javascript
jQuery实现表格冻结顶栏效果
Aug 20 jQuery
JavaScript基础进阶之数组方法总结(推荐)
Sep 04 Javascript
微信小程序scroll-view实现字幕滚动
Jul 14 Javascript
使用p5.js临摹动态图片
Nov 04 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
PHP获取数组中某元素的位置及array_keys函数应用
2013/01/29 PHP
php使用cookie保存登录用户名的方法
2015/01/26 PHP
PHP使用GD库输出汉字的方法【测试可用】
2016/11/10 PHP
laravel config文件配置全局变量的例子
2019/10/13 PHP
Yii框架 session 数据库存储操作方法示例
2019/11/18 PHP
用showModalDialog弹出页面后,提交表单总是弹出一个新窗口
2009/07/18 Javascript
javascript与CSS复习(三)
2010/06/29 Javascript
Jquery拖拽并简单保存的实现代码
2010/11/28 Javascript
js定时调用方法成功后并停止调用示例
2014/04/08 Javascript
javascript中的__defineGetter__和__defineSetter__介绍
2014/08/15 Javascript
js实现图片漂浮效果的方法
2015/03/02 Javascript
JQuery限制复选框checkbox可选中个数的方法
2015/04/20 Javascript
javascript实现3D切换焦点图
2015/10/16 Javascript
HTML5 js实现拖拉上传文件功能
2020/11/20 Javascript
angular 用拦截器统一处理http请求和响应的方法
2017/06/08 Javascript
Vue组件通信之Bus的具体使用
2017/12/28 Javascript
微信小程序实现运动步数排行功能(可删除)
2018/07/05 Javascript
JS/HTML5游戏常用算法之碰撞检测 像素检测算法实例详解
2018/12/12 Javascript
微信小程序实现左右列表联动
2020/05/19 Javascript
JS使用数组实现的队列功能示例
2019/03/04 Javascript
Angular封装表单控件及思想总结
2019/12/11 Javascript
JavaScript ECMA-262-3 深入解析(二):变量对象实例详解
2020/04/25 Javascript
[01:51]2014DOTA2西雅图邀请赛 MVP 外卡赛black场间采访
2014/07/09 DOTA
Python中实现字符串类型与字典类型相互转换的方法
2014/08/18 Python
Python Web框架Flask下网站开发入门实例
2015/02/08 Python
Python实现KNN邻近算法
2021/01/28 Python
PyCharm搭建Spark开发环境实现第一个pyspark程序
2019/06/13 Python
YUV转为jpg图像的实现
2019/12/09 Python
python groupby 函数 as_index详解
2019/12/16 Python
Windows下PyCharm配置Anaconda环境(超详细教程)
2020/07/31 Python
python+pygame实现坦克大战小游戏的示例代码(可以自定义子弹速度)
2020/08/11 Python
CSS3属性选择符介绍
2008/10/17 HTML / CSS
iphoneX 适配客户端H5页面的方法教程
2017/12/08 HTML / CSS
英国运动风奢侈品购物网站:Maison De Fashion
2020/08/28 全球购物
cf搞笑广告词
2014/03/14 职场文书
二年级数学教学反思
2016/02/16 职场文书