本文为大家介绍下使用html+javascript实现可拖动弹出层、对话框、可提交，具体代码如下，感兴趣的朋友可以参考下，希望对大家有所帮助

  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <title>JAVASCRIPT弹出层</title>
  5. <META http-equiv=Content-Type content="text/html; charset=utf-8">
  6. <style>
  7. #popDiv {
  8. position: absolute;
  9. visibility: hidden;
  10. overflow: hidden;
  11. border: 2px solid #AEBBCA;
  12. background-color: #EEF1F8;
  13. cursor: move;
  14. padding: 1px;
  15. } 
  16.  
  17. #popTitle {
  18. background: #9DACBF;
  19. height: 20px;
  20. line-height: 20px;
  21. padding: 1px;
  22. } 
  23.  
  24. #popForm {
  25. padding: 2px;
  26. } 
  27.  
  28. .title_left {
  29. font-weight: bold;
  30. padding-left: 5px;
  31. float: left;
  32. } 
  33.  
  34. .title_right {
  35. float: right;
  36. } 
  37.  
  38. #popTitle .title_right a {
  39. color: #000;
  40. text-decoration: none;
  41. } 
  42.  
  43. #popTitle .title_right a:hover {
  44. text-decoration: underline;
  45. color: #FF0000;
  46. }
  47. </style>
  48. <script>
  49. function showPopup() {//弹出层
  50. var objDiv = document.getElementById("popDiv");
  51. objDiv.style.top = "50px";//设置弹出层距离上边界的距离
  52. objDiv.style.left = "200px";//设置弹出层距离左边界的距离
  53. objDiv.style.width = "300px";//设置弹出层的宽度
  54. objDiv.style.height = "200px";//设置弹出层的高度
  55. //objDiv.style.display = "block";
  56. objDiv.style.visibility = "visible";
  57. }
  58. function hidePopup() {//关闭层
  59. var objDiv = document.getElementById("popDiv");
  60. objDiv.style.visibility = "hidden";
  61. }
  62. </script>
  63. </head>
  64. <body>
  65. <div id="popDiv">
  66. <div id="popTitle"> <!-- 标题div -->
  67. <span class="title_left">修改操作</span> <span class="title_right"><a
  68. href="#" onclick="hidePopup();">关闭</a> </span>
  69. </div>
  70. <div id="popForm"> <!-- 表单div -->
  71. <form action="insert_map.jsp" method="post">
  72. <p>
  73.       ID :<input type="text" name="id" value="0" /> </br>
  74. 名    称 :<input type="text" name="name" value="aaa" /> </br>
  75. 电压等级 :<input type="text" name="voltage_level" value="110kv" /> </br>
  76. 经    度 :<input type="text" name="lon" value="121." /> </br>
  77. 纬    度 :<input type="text" name="lat" value="28." /> </br>
  78. </p>
  79.    <input type="submit" value="提交" />
  80.    <input type="reset" value="重置" />
  81.    <input type="reset" value="取消" onclick="hidePopup()" />
  82. </form>
  83. </div>
  84. </div>
  85. <p>
  86. <input name="" type="button" onclick="showPopup()" value="操作" />
  87. </p> 
  88.  
  89. <script type="text/javascript">
  90. /*-------------------------鼠标左键拖动---------------------*/
  91. /*--------当不需要实现此功能时，可以将这一部分代码删除------------*/
  92. var objDiv = document.getElementById("popDiv");
  93. var isIE = document.all ? true : false;//判断浏览器类型
  94. document.onmousedown = function(evnt) {//当鼠标左键按下后执行此函数
  95. var evnt = evnt ? evnt : event;
  96. if (evnt.button == (document.all ? 1 : 0)) {
  97. mouseD = true;//mouseD为鼠标左键状态标志，为true时表示左键被按下
  98. }
  99. } 
  100.  
  101. objDiv.onmousedown = function(evnt) {
  102. objDrag = this;//objDrag为拖动的对象
  103. var evnt = evnt ? evnt : event;
  104. if (evnt.button == (document.all ? 1 : 0)) {
  105. mx = evnt.clientX;
  106. my = evnt.clientY;
  107. objDiv.style.left = objDiv.offsetLeft + "px";
  108. objDiv.style.top = objDiv.offsetTop + "px";
  109. if (isIE) {
  110. objDiv.setCapture();
  111. //objDiv.filters.alpha.opacity = 50;//当鼠标按下后透明度改变
  112. } else {
  113. window.captureEvents(Event.MOUSEMOVE);//捕获鼠标拖动事件
  114. //objDiv.style.opacity = 0.5;//当鼠标按下后透明度改变
  115. }
  116. }
  117. }
  118. document.onmouseup = function() {
  119. mouseD = false;//左键松开
  120. objDrag = "";
  121. if (isIE) {
  122. objDiv.releaseCapture();
  123. //objDiv.filters.alpha.opacity = 100;//当鼠标左键松开后透明度改变
  124. } else {
  125. window.releaseEvents(objDiv.MOUSEMOVE);//释放鼠标拖动事件
  126. //objDiv.style.opacity = 1;//当鼠标左键松开后透明度改变
  127. }
  128. } 
  129.  
  130. document.onmousemove = function(evnt) {
  131. var evnt = evnt ? evnt : event;
  132. if (mouseD == true && objDrag) {
  133. var mrx = evnt.clientX - mx;
  134. var mry = evnt.clientY - my;
  135. objDiv.style.left = parseInt(objDiv.style.left) + mrx + "px";
  136. objDiv.style.top = parseInt(objDiv.style.top) + mry + "px";
  137. mx = evnt.clientX;
  138. my = evnt.clientY;
  139. }
  140. }
  141. </script> 
  142.  
  143. </body>
  144. </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. JavaScript-Curry

    Currying allows you to easily create custom functions by partially invoking an existing function. He ...

  2. 验证码计时 -- UIButton setTitle 闪烁问题解决方案

    首先,有各种版本 方法一: 我运用的一种极其简单的版本:  将UIButton的Type 设成 Custom 就不会有闪烁的问题重现 p.p1 { margin: 0.0px 0.0px 0.0px ...

  3. Windows Shell（外壳）编程相关

    Windows Shell名字空间介绍: http://blog.csdn.net/kingcom_xu/article/details/18943 Windows Shell 外壳编程基础教程(C# ...

  4. 理解委托(delegate)及为什么要使用委托

    理解委托(delegate)及为什么要使用委托 委托:是一种定义方法签名的类型. 当实例化委托时,您可以将其实例与任何具有兼容签名的方法相关联. 您可以通过委托实例调用方法. 上述为官方说法,理解起来 ...

  5. MD5 .net与PHP加密值一样的加密代码

    .net 代码 using System.Security.Cryptography; /// <summary> /// 返回大写形式的MD5加密 /// </summary> ...

  6. Android Studio Gradle project refresh failed No such property classpath for class

    新建的一个 android 项目居然发现不能运行,gradle 无法启动,奇怪: Gradle 'Meitian' project refresh failed:          No such p ...

  7. Fox And Jumping

    Fox And Jumping 题目链接:http://codeforces.com/problemset/problem/512/B dp 若所选卡片能到达区间内任意点,那么所选卡片的最大公约数为1 ...

  8. Beef

    修改配置文件/usr/share/beef-xss/config.yaml (1)改vi beef侦听端口:    http:   port:3000(改为80) (2)与Metaspolit关联: ...

  9. 《JavaScript网页特效经典300例-高级篇》

    <Javascript网页经典特性300例> 高级篇 第18章:ajax应用 Ajax传输JSON数据实例定义一套自己的Ajax框架 第19章:面向对象的特性 定义一个类利用prototy ...

  10. ggplot2 geom相关设置——添加线条

    在作图过程中,有时我们可能需要通过添加一些线条,使得图形的可视化变得更好,比如一些趋势线等等. 下面我们来看下,一些线条的添加方式. geom_abline(mapping = NULL, data  ...