本文为大家介绍下使用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. php系统无法上传图片问题

    PHP Warning:  File upload error - unable to create a temporary file in Unknown on line 0   我的测试环境是 w ...

  2. 雄冠条码PV系统-2016-05-17-收获

    Q1:微信浏览器 input获取焦点时,页面宽度变大 解决方法: HTML <header> 中添加<meta name="viewport" content=& ...

  3. hdu1026

    #include <stdio.h> #include <string.h> #include <queue> using namespace std; struc ...

  4. SublimeLinter 3中使用jshint

    这货得知已久,在sublime2时期对着教程按部就班的凑合用着...不明所以. 今天无意发现SublimeLinter终于出3了,果断装之,鼓捣1个多小时,磕磕绊绊终于成功工作了.期间看了无数英文文档 ...

  5. <? extends T>和<? super T>

    转自:Java泛型中extends和super的区别? 另,问题来源:Java 泛型 <? super T> 中 super 怎么 理解?与 extends 有何不同? <? ext ...

  6. 如何使用cygwin去编译cocos2dx项目中的C++文件

    将生成的cocos2dx的Android项目导入到eclipse 可以先测试一下如何编译C++项目: 1.打开cygwin,进入到Android项目对应的目录下面去: 2.编译脚本 在编译脚本之间,如 ...

  7. FTP服务添加用户及设置权限

    CentOS下安装vsftpd省略. 添加ftp账户: useradd ahaii -d /home/ftp/ -s /sbin/nologin 添加密码: passwd ahaii 限制该用户只能访 ...

  8. CentOS 6.0找不到ifcfg-eth0解决方案

    症状:     /etc/sysconfig/network-scripts/中只有ifcfg-lo文件,而没有ifcfg-eth0. 终端中执行命令ifconfig显示的信息为ifcfg-lo的信息 ...

  9. [ An Ac a Day ^_^ ] CodeForces 601A The Two Routes 最短路

    14号就ccpc全国赛的全国赛了 而且也快东北赛的选拔赛了 现在队伍实力实在不行 参加了也是边缘化的队伍 虽然有新生保护的设置 但实话说 机会还是不大 所以不如趁现在开始好好努力 明年也许还有机会 A ...

  10. chapter 13_2 关系类、库定义的元方法

    元表还可以指定关系操作符的含义,元方法为__eq ,__lt(小于) ,__le(小于等于). 而其它3个关系操作符则没有单独的元方法,Lua会 把a ~= b 转化为not(a == b) 将a&g ...