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 相关文章推荐
jquery提示 &quot;object expected&quot;的解决方法
Dec 13 Javascript
JSDoc 介绍使用规范JsDoc的使用介绍
Feb 12 Javascript
JavaScript控制Session操作方法
Jan 17 Javascript
Javascript实现返回上一页面并刷新的小例子
Dec 11 Javascript
小巧强大的jquery layer弹窗弹层插件
Dec 06 Javascript
浅析JavaScript Array和string的转换(推荐)
May 20 Javascript
jQuery实现输入框的放大和缩小功能示例
Jul 21 jQuery
关于node-bindings无法在Electron中使用的解决办法
Dec 18 Javascript
JS事件绑定的常用方式实例总结
Mar 02 Javascript
jQuery 选择器用法实例分析【prev + next】
May 22 jQuery
关于Js中new操作符的作用详解
Feb 21 Javascript
JavaScript中跨域问题的深入理解
Mar 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中使用cURL实现Get和Post请求的方法
2013/03/13 PHP
php获取Google机器人访问足迹的方法
2015/04/15 PHP
php实现编辑和保存文件的方法
2015/07/20 PHP
Smarty缓存机制实例详解【三种缓存方式】
2019/07/20 PHP
thinkphp框架类库扩展操作示例
2019/11/26 PHP
js获取视频时长代码
2014/04/10 Javascript
利用函数的惰性载入提高javascript代码执行效率
2014/05/05 Javascript
js实现window.open不被拦截的解决方法汇总
2014/10/30 Javascript
jquery制作 随机弹跳的小球特效
2015/02/01 Javascript
HTML5使用DeviceOrientation实现摇一摇功能
2015/06/05 Javascript
使用jQuery在移动页面上添加按钮和给按钮添加图标
2015/12/04 Javascript
再谈Javascript中的基本类型和引用类型(推荐)
2016/07/01 Javascript
利用jquery正则表达式在页面验证url网址输入是否正确
2017/04/04 jQuery
AngularJs 常用的过滤器
2017/05/15 Javascript
JavaScript箭头函数_动力节点Java学院整理
2017/06/28 Javascript
jQuery实现右侧抽屉式在线客服功能
2017/12/25 jQuery
从vue源码解析Vue.set()和this.$set()
2018/08/30 Javascript
Windows下Node爬虫神器Puppeteer安装记
2019/01/09 Javascript
使用Node.js实现一个多人游戏服务器引擎
2019/03/13 Javascript
微信小程序 scroll-view 水平滚动实现过程解析
2019/10/12 Javascript
jQuery操作事件完整实例分析
2020/01/10 jQuery
JavaScript进制转换实现方法解析
2020/01/18 Javascript
基于python实现的抓取腾讯视频所有电影的爬虫
2016/04/22 Python
Python实现类似比特币的加密货币区块链的创建与交易实例
2018/03/20 Python
python怎么调用自己的函数
2020/07/01 Python
pandas.DataFrame.drop_duplicates 用法介绍
2020/07/06 Python
利用canvas实现图片下载功能来实现浏览器兼容问题
2019/05/31 HTML / CSS
html5 datalist标签使用示例(自动完成组件)
2014/05/04 HTML / CSS
Marlies Dekkers内衣法国官方网上商店:国际知名的荷兰内衣品牌
2019/03/18 全球购物
Guess荷兰官网:美国服饰品牌
2020/01/22 全球购物
回门宴答谢词
2014/01/13 职场文书
2014学校领导四风问题对照检查材料思想汇报
2014/09/22 职场文书
民事诉讼代理授权委托书
2014/10/11 职场文书
CSS 新特性 contain控制页面的重绘与重排问题
2021/04/30 HTML / CSS
Windows11性能真的上涨35%? 桌面酷睿i9实测结果公开
2021/11/21 数码科技
Nginx使用ngx_http_upstream_module实现负载均衡功能示例
2022/08/05 Servers