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中“+=”的应用
Feb 02 Javascript
xml分页+ajax请求数据源+dom取结果实例代码
Oct 31 Javascript
javascript 图片裁剪技巧解读
Nov 15 Javascript
js 高效去除数组重复元素示例代码
Dec 19 Javascript
js闭包实例汇总
Nov 09 Javascript
详解js的事件代理(委托)
Dec 22 Javascript
浅谈关于.vue文件中style的scoped属性
Aug 19 Javascript
在Vue中使用highCharts绘制3d饼图的方法
Feb 08 Javascript
vue中子组件的methods中获取到props中的值方法
Aug 27 Javascript
傻瓜式解读koa中间件处理模块koa-compose的使用
Oct 30 Javascript
微信小程序日历插件代码实例
Dec 04 Javascript
js实现全选和全不选功能
Jul 28 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获取数组长度或某个值出现次数的方法
2015/02/11 PHP
PHP实现通过Luhn算法校验信用卡卡号是否有效
2015/03/23 PHP
php使用Jpgraph绘制简单X-Y坐标图的方法
2015/06/10 PHP
PHP函数积累总结
2019/03/19 PHP
JavaScript 构造函数 面相对象学习必备知识
2010/06/09 Javascript
jQuery UI的Dialog无法提交问题的解决方法
2011/01/11 Javascript
裁剪字符串trim()自定义改进版
2013/04/10 Javascript
Js 代码中,ajax请求地址后加随机数防止浏览器缓存的原因
2013/05/07 Javascript
uploadify在Firefox下丢失session问题的解决方法
2013/08/07 Javascript
如何设置一定时间内只能发送一次请求
2014/02/28 Javascript
基于jQuery的图片不完全按比例自动缩小
2014/07/11 Javascript
JavaScript获取伪元素(Pseudo-Element)属性的方法技巧
2015/03/13 Javascript
js实现带圆角的两级导航菜单效果代码
2015/08/24 Javascript
bootstrap导航、选项卡实现代码
2016/12/28 Javascript
百度地图API之百度地图退拽标记点获取经纬度的实现代码
2017/01/12 Javascript
React实现todolist功能
2020/12/28 Javascript
[00:15]TI9地铁玩家打卡
2019/08/11 DOTA
Python2.7读取PDF文件的方法示例
2017/07/13 Python
Python算法输出1-9数组形成的结果为100的所有运算式
2017/11/03 Python
Python小工具之消耗系统指定大小内存的方法
2018/12/03 Python
Python中模块(Module)和包(Package)的区别详解
2019/08/07 Python
Python通过Tesseract库实现文字识别
2020/03/05 Python
python中的selenium安装的步骤(浏览器自动化测试框架)
2020/03/17 Python
python框架flask入门之路由及简单实现方法
2020/06/07 Python
HTML5 CSS3实现一个精美VCD包装盒个性幻灯片案例
2014/06/16 HTML / CSS
非洲NO.1网上商店:Jumia肯尼亚
2016/08/18 全球购物
Watch Station官方网站:世界一流的手表和智能手表
2020/01/05 全球购物
园林技术个人的自我评价
2014/02/15 职场文书
校园游戏活动新闻稿
2014/10/15 职场文书
党员作风建设整改方案
2014/10/27 职场文书
财务整改报告范文
2014/11/05 职场文书
公司行政主管岗位职责
2015/04/09 职场文书
2015年法院工作总结范文
2015/04/28 职场文书
python 下划线的多种应用场景总结
2021/05/12 Python
Python函数中的不定长参数相关知识总结
2021/06/24 Python
Java中try catch处理异常示例
2021/12/06 Java/Android