本文为大家介绍下使用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>

效果如下图：

html+javascript实现可拖动可提交的弹出层对话框效果的更多相关文章

  1. Jquery和Javascript 实际项目中写法基础-弹出窗和弹出层 (4)

     一.实际项目中有很多如下界面效果.    二.该效果可以归结为弹出窗或者弹出层来实现的,为什么这么说?看如下代码:      <!DOCTYPE html> <html> & ...

  2. javascript弹出层-DEMO001

    首先上一张图 看下弹出层的效果 从图中可以看到二部分 一是弹出层 二是遮照层 弹出层:即弹出你要操作的内容 遮照层:遮照住不要操作的内空 实际技术原理主要是 CSS +JS  (z-index是核心) ...

  3. JavaScript学习笔记(一)——延迟对象、跨域、模板引擎、弹出层、AJAX示例

    一.AJAX示例 AJAX全称为“Asynchronous JavaScript And XML”(异步JavaScript和XML) 是指一种创建交互式网页应用的开发技术.改善用户体验,实现无刷新效 ...

  4. JavaScript学习总结(一)——延迟对象、跨域、模板引擎、弹出层、AJAX示例

    一.AJAX示例 AJAX全称为“Asynchronous JavaScript And XML”(异步JavaScript和XML) 是指一种创建交互式网页应用的开发技术.改善用户体验,实现无刷新效 ...

  5. JavaScript学习总结(二)——延迟对象、跨域、模板引擎、弹出层、AJAX示例

    一.AJAX示例 AJAX全称为“Asynchronous JavaScript And XML”(异步JavaScript和XML) 是指一种创建交互式网页应用的开发技术.改善用户体验,实现无刷新效 ...

  6. JavaScript实现弹出层（以layer.open为例）

    首先,引用layer,自行下载. 添加如下两行 <script src=" ../layer/jquery.min.js"></script> <sc ...

  7. JavaScript学习总结（6）——js弹出框、对话框、提示框、弹窗总结

    一.JS的三种最常见的对话框 [javascript] view plaincopy //====================== JS最常用三种弹出对话框 =================== ...

  8. javascript的alert()的消息框不弹出或者弹出信息有误

    有时不知道什么,有时javascript的alert()的消息框不弹出或者弹出信息有误,代码是这么写的: //提示信息 public static void alert(TemplateControl ...

  9. 使用JavaScript实现弹出层效果

    声明 阅读本文需要有一定的HTML.CSS和JavaScript基础 设计 实现弹出层效果的思路非常简单:将待显示的内容先隐藏,在触发某种条件后(如点击按钮),将原本隐藏的内容显示出来. 实现 < ...

随机推荐

  1. EditText文本中用正则匹配是否包含数字，及判断文本只能是纯汉字或纯字母

    遇到判断EditText中文本,是否为制定格式 EditText et; Button btn; @Override protected void onCreate(Bundle savedInsta ...

  2. 使用minidom来处理XML的示例(Python 学习)(转载)

    作者网站:http://www.donews.net/limodou/archive/2004/07/15/43609.aspx  一.XML的读取.在 NewEdit 中有代码片段的功能,代码片段分 ...

  3. iOS上传图片详解

    iphone中图像通常存储在4个地方[相册.应用程序包.沙盒.Internet],通过这4个源,我们就可以存取应用图片. 相册 iphone的相册包含摄像头胶卷+用户计算机同步的部分照片.用户可以通过 ...

  4. java javaScript实现遮罩层 动态加载

    通过java.JavaScript和css实现点击按钮后出现灰色遮罩层,并显示动态加载的字样,提高用户体验,废话不多说,上代码(写这个博客的原因是网上代码太多新手根本不知道哪里对哪里,这里剔除所有无关 ...

  5. Java中ArrayList的使用

    //创建ArrayList ArrayList arr  = new ArrayList(); //ArrayList添加数据 arr.add("123"); arr.add(&q ...

  6. 百度用AR复现朝阳门，野心渐明直指AR平台

    近日,支付宝推出基于"AR+LBS"的AR实景红包后,BAT的另一个巨头百度也忍不住展示了自家AR技术.12月22日上午11点,百度邀请了一众媒体朋友前往朝阳门地铁站F口,体验期最 ...

  7. 【Python】生成器、回溯和八皇后问题

    八皇后问题: 把N个皇后,放在N*N的棋盘上面,从第一行往下放,每个皇后占一行,同时,每个皇后不能处在同一列,对角线上,有多少种放置方法. 思路: 典型的回溯问题: 1.当要放置最后一个皇后时候,默认 ...

  8. c# socket传输struct类型

    data结构体类型 public struct datas    { public string test1; public string test2;    } //socket服务器端 publi ...

  9. stack(STL)

    //Stack STL //在STL中,栈是以别的容器作为底部结构,再将 //接口改变,使之符合栈的特性 //一共5个常用操作函数 //构造析构 stack<Elem>c; //build ...

  10. git clone 出现 RPC failed 错误的解决方案

    今天使用git clone一个大型项目的时候出现了如下错误: