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

代码如下:

<!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>

效果如下图：

赞 (0)

相关推荐

  • js 可拖动列表实现代码

    js 可拖动列表实现代码

    补充一点: 要禁止移动中选中文字,FF可以设置CSS xxxx{-moz-user-select:none;} 其他的浏览器可以设置 XXXX.onselectstart = function(){return false} 一种实现原理就是点击没目标元素之后,创建一个占位元素(或者复制一份目标元素,即拷贝B),然后拖动目标元素(或者复制的来的新元素B): 找到相应的位置之后,插入目标元素.清除占位元素或者B. 比如有一个列表: 复制代码 代码如下: <!DOCTYPE html PUBLIC

  • js通过八个点 拖动改变div大小的实现方法

    复制代码 代码如下: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Resize</title> <style type="text/css"> #rRightDown,#rLeftDown,#rLeftUp,#rRightUp,#rRigh

  • javascript之可拖动的iframe效果代码

    // HISTORY// ------------------------------------------------------------------// Jan 23, 2004: Fixed problems which caused the script not to work in//               some framed situations. Improved browser support.//               Added easier "addH

  • JavaScript简单实现鼠标拖动选择功能

    复制代码 代码如下: <style><!--body{padding-top:50px;padding-left:100px;padding-right:150px;}  .fileDiv{float:left;width:100px;height:100px;text-align:center;line-height:100px;font-size:12px;border:1px solid #cccccc;margin-right:10px;margin-bottom:10px;} 

  • js实现可拖动DIV的方法

    随着时代的变化,越来越感觉到js的重要性,js不仅可以做web页面(如Ext框架),还可以做一些web的特效,这些特效不仅兼容PC,而且兼容手机端,毕竟是基于浏览器的,和平台没关系.现在微软的windows8 系统的App都可以用js开发了,大家有时间可以去尝试一下. 现在切入正题,说一下js 实现可拖动Div.实现这个功能我们先说一下思路: 1.捕捉鼠标div的mousedown事件 2.捕捉 document的   mousemove事件 3.取消事件 然后我们看一下代码: 复制代码 代码如

  • javascript 事件处理、鼠标拖动效果实现方法详解

    javascript 事件处理、鼠标拖动效果实现方法详解

    先看看要拖动的层(模拟窗口)的效果图吧. 要实现的拖动效果:鼠标左键在窗口上方的标题栏上按下,同时移动鼠标,窗口跟着移动.窗口: 复制代码 代码如下: <div id="win"> <div id="win_header"></div> </div> 一点准备工作: 要让窗口能自由移动,那么窗口的定位(position)应该采用绝对定位(absolute): 给窗口添加标题栏,这里使用一个放在窗口顶部的层实现,同时将标

  • angularjs创建弹出框实现拖动效果

    angularjs创建弹出框实现拖动效果

    本文实例介绍了angularjs创建弹出框实现拖动效果的相关代码,项目中需要将angular-ui-bootstrap中用到的弹出框,使之可拖动,分享给大家供大家参考,具体内容如下 运行效果图: 由于源文件中没有实现,需要自己实现指令,以下即为该指令,亲测可以实现. .directive('draggable', ['$document', function($document) { return function(scope, element, attr) { var startX = 0,

  • JS实现可缩放、拖动、关闭和最小化的浮动窗口完整实例

    本文实例讲述了JS实现可缩放.拖动.关闭和最小化的浮动窗口方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999

  • JS高级拖动技术 setCapture，releaseCapture

    复制代码 代码如下: <script type="text/javascript"> <!-- window.onload=function(){ objDiv = document.getElementById('drag'); drag(objDiv); }; function drag(dv){ dv.onmousedown=function(e){ var d=document; e = e || window.event; var x= e.layerX |

  • Javascript实现的类似Google的Div拖动效果代码

    复制代码 代码如下: JScript 文件: //检测浏览器 MSIE Firefox var ie=false,moz=false; (function() {//check the browser var userAgent=navigator.userAgent; if(userAgent.indexOf("MSIE")!=-1) ie=true; else if(userAgent.indexOf("Firefox")!=-1) moz=true; })()

  • javascript div 弹出可拖动窗口

    /* * 创建弹出div窗口. 1.接口说明:DivWindow(id,title,width,height,content) 构造函数,创建一个弹出窗口对象 参数:id 弹出窗口id: title:弹出窗口标题名称: width:弹出窗口宽度 height:弹出窗口高度 content: 弹出窗口显示内容 2.接口说明: closeDivWindow(id) 关闭窗口 参数: id 弹出窗口id 3.接口说明:setPopupTopTitleFontColor(PopupTopTitleFon

  • 纯js实现的积木(div层)拖动功能示例

    纯js实现的积木(div层)拖动功能示例

    本文实例讲述了纯js实现的积木(div层)拖动功能.分享给大家供大家参考,具体如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>拖动</title> <style type="text/css"> </style> </head> <bo

随机推荐