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 jQuery $.post $.ajax用法
Jul 09 Javascript
jquery1.4后 jqDrag 拖动 不可用
Feb 06 Javascript
js 静态动态成员 and 信息的封装和隐藏
May 29 Javascript
javascript 弹出的窗口返回值给父窗口具体实现
Nov 23 Javascript
详解AngularJS中的依赖注入机制
Jun 17 Javascript
Javascript 普通函数和构造函数的区别
Nov 05 Javascript
JS字符串按逗号和回车分隔的方法
Apr 25 Javascript
js原生代码实现轮播图的实例讲解
Jul 28 Javascript
详解基于Vue+Koa的pm2配置
Oct 24 Javascript
JS使用tween.js动画库实现轮播图并且有切换功能
Jul 17 Javascript
JS 设计模式之:单例模式定义与实现方法浅析
May 06 Javascript
vue项目页面嵌入代码块vue-prism-editor的实现
Oct 30 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
咖啡产品发展的三大浪潮
2021/03/04 咖啡文化
php生成EAN_13标准条形码实例
2013/11/13 PHP
jQuery获取json后使用zy_tmpl生成下拉菜单
2015/03/27 PHP
PHP中两个float(浮点数)比较实例分析
2015/09/27 PHP
laravel5 Eloquent 实现事务方式
2019/10/21 PHP
Laravel框架Blade模板简介及模板继承用法分析
2019/12/03 PHP
IE DOM实现存在的部分问题及解决方法
2009/07/25 Javascript
JS字符串函数扩展代码
2011/09/13 Javascript
jquery mobile changepage的三种传参方法介绍
2013/09/13 Javascript
购物车选中得到价格实现示例
2014/01/26 Javascript
JS创建类和对象的两种不同方式
2014/08/08 Javascript
JS、CSS以及img对DOMContentLoaded事件的影响
2014/08/12 Javascript
JavaScript实现信用卡校验方法
2015/04/07 Javascript
javascript实现网页中涉及的简易运动(改变宽高、透明度、位置)
2015/11/29 Javascript
jQuery控制li上下循环滚动插件用法实例(附demo源码下载)
2016/05/28 Javascript
jQuery实现的简单拖拽功能示例
2016/09/13 Javascript
微信小程序 教程之事件
2016/10/18 Javascript
JS中用try catch对代码运行的性能影响分析
2016/12/26 Javascript
详解js前端代码异常监控
2017/01/11 Javascript
利用Node.js编写跨平台的spawn语句详解
2017/02/12 Javascript
Vue表单类的父子组件数据传递示例
2018/05/03 Javascript
vue用Object.defineProperty手写一个简单的双向绑定的示例
2018/07/09 Javascript
详解如何配置vue-cli3.0的vue.config.js
2018/08/23 Javascript
vue响应式更新机制及不使用框架实现简单的数据双向绑定问题
2019/06/27 Javascript
微信小程序把百度地图坐标转换成腾讯地图坐标过程详解
2019/07/10 Javascript
vue.js自定义组件实现v-model双向数据绑定的示例代码
2020/01/08 Javascript
[01:03:41]DOTA2-DPC中国联赛 正赛 Dynasty vs XG BO3 第三场 2月2日
2021/03/11 DOTA
学习python (1)
2006/10/31 Python
Python编程中的异常处理教程
2015/08/21 Python
Python中应该使用%还是format来格式化字符串
2018/09/25 Python
详解Django-auth-ldap 配置方法
2018/12/10 Python
python文档字符串(函数使用说明)使用详解
2019/07/30 Python
python RC4加密操作示例【测试可用】
2019/09/26 Python
kafka-python 获取topic lag值方式
2019/12/23 Python
HTML5跳转小程序wx-open-launch-weapp的示例代码
2020/07/16 HTML / CSS
中间件的定义
2016/08/09 面试题