本文为大家介绍下使用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. CVE-2015-5122 简要分析(2016.4)

    CVE-2015-5122 简要分析 背景 最近在学习Flash漏洞的分析,其与IE漏洞的分析还是有诸多的不同(不便)之处,折腾了一阵子终于克服了没有符号表.Flash的超时定时器等问题.所以找到了去 ...

  2. ANSII 与Unicode,Utf8之间的转换

    在项目开发中,我们难免会遇到各种问题,特别是字符直接的转换,这里列举字符直间转换的代码: using namespace std; wstring AnsiiToUnicode(const strin ...

  3. ndk搭建与运行

    1)打开Android开发者的官网http://developer.android.com/找到Develop点击.如果页面打不开,通过代理来访问. 2)进入后再点击Tools 3)进入后在左侧找到N ...

  4. jQuery ajax调用后台aspx后台文件的两种常见方法(不是ashx)

    在asp.net webForm开发中,用Jquery ajax调用aspx页面的方法常用的有两种:下面我来简单介绍一下. [WebMethod] public static string SayHe ...

  5. 在cmd中设置字体

    1.首先在cmd中输入chcp 65001 回车(通过 chcp命令改变代码页,UTF-8的代码页为65001) 2.右击命令提示符的标题栏点击属性. 3.在属性中选择字体后点击确认即可.

  6. Deploy Django in Windows

      配置 安装目录 D:\PythonWebSW\(免安装) d:\Program Files\ (安装版) 工作目录 E:/PythonWeb/code 项目名称 voith_sales Insta ...

  7. Hdu 3363 Ice-sugar Gourd（对称，圆）

    Ice-sugar Gourd Time Limit: 5000/2000 MS (Java/Others)    Memory Limit: 65536/65536 K (Java/Others)T ...

  8. 在UE4中使用SVN作为source control工具

    ==========预先处理 1.到这个目录下 2.鼠标在空白处 按住shift键 同时右键 会多出一个 可以打开的cmd 3.输入命令,修改红线部分. me: 登陆svn地址的用户名, URL网址: ...

  9. SQL优化及注意事项

    1. 把数据.日志.索引放到不同的I/O设备上,增加读取速度.数据量(尺寸)越大,提高I/O越重要. 2. 纵向.横向分割表,减少表的尺寸,如:可以把大数据量的字段拆分表. 3. 根据查询条件,建立索 ...

  10. 【转】cookie和session的区别

    原作者:施杨(施杨's Think out)出处:http://shiyangxt.cnblogs.com ************** 本文版权归原作者和博客园共有,欢迎转载,转载请保留该申明 ** ...