日常的网页编程中，弹出对话框经常会以各种形式出现，例如：信息提示框、确认框、新增、修改信息等对话框均是其不同的表现形式。

此文以弹出信息新增对话框进行简要演示，经请参阅！

以下为其对应的结构目录：

alert01.html 文件对应源码如下所示：

  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弹出框-01</title>
  5.          <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  6.  
  7.          <link rel="stylesheet" type="text/css" href="alert01.css">
  8.          <script type="text/javascript" src= "alert01.js"></script>
  9.      </head>
  10.  
  11.      <body>
  12.          <div id="popDiv">
  13.  
  14.              <div id="popTitle"> <!-- 标题div -->
  15.                  <span class="title_left">学生信息修改</span>
  16.                  <span class="title_right">
  17.                      <a href="#" onclick="hidePopup();">关闭</a>
  18.                  </span>
  19.              </div>
  20.  
  21.              <div id="popForm"> <!-- 表单div -->
  22.                  <form action="insert_map.php" method="post">
  23.                      <p id="info">
  24.                      编号 : <input type="text" name="id" /> </br>
  25.                      名称 : <input type="text" name="name" /> </br>
  26.                      等级 : <input type="text" name="level" /></br>
  27.                      年级 : <input type="text" name="lon" /> </br>
  28.                      班级 : <input type="text" name="lat" /> </br>
  29.                      </p>
  30.  
  31.                      <input type="submit" value="提交" />
  32.                      <input type="reset" value="重置" onclick="clearinfo()"/>
  33.                      <input type="reset" value="取消" onclick="hidePopup()" />
  34.                  </form>
  35.              </div>
  36.          </div>
  37.  
  38.          <p>
  39.              <input name="" type="button" onclick="showPopup()" value="学生信息修改" />
  40.          </p>
  41.  
  42.          <script type="text/javascript">
  43.              /*-------------------------鼠标左键拖动---------------------*/
  44.              /*--------当不需要实现此功能时，可以将这一部分代码删除------------*/
  45.              var objDiv = document.getElementById("popDiv");
  46.  
  47.              // 判断浏览器类型
  48.              var isIE = document.all ? true : false;
  49.  
  50.              // 当鼠标左键按下后执行此函数
  51.              document.onmousedown = function(evnt) {
  52.                  var evnt = evnt ? evnt : event;
  53.  
  54.                  if (evnt.button == (document.all ? 1 : 0)) {
  55.                      // mouseD为鼠标左键状态标志，为true时表示左键被按下
  56.                      mouseD = true;
  57.                  }
  58.              }
  59.  
  60.              objDiv.onmousedown = function(evnt) {
  61.                  objDrag = this;     // objDrag为拖动的对象
  62.                  var evnt = evnt ? evnt : event;
  63.  
  64.                  if (evnt.button == (document.all ? 1 : 0)) {
  65.                      mx = evnt.clientX;
  66.                      my = evnt.clientY;
  67.                      objDiv.style.left = objDiv.offsetLeft + "px";
  68.                      objDiv.style.top = objDiv.offsetTop + "px";
  69.  
  70.                      if (isIE) {
  71.                          objDiv.setCapture();
  72.                          //objDiv.filters.alpha.opacity = 50;     // 当鼠标按下后透明度改变
  73.                      } else {
  74.                          window.captureEvents(Event.MOUSEMOVE);   // 捕获鼠标拖动事件
  75.                          //objDiv.style.opacity = 0.5;            // 当鼠标按下后透明度改变
  76.                      }
  77.                  }
  78.              }
  79.  
  80.              document.onmouseup = function() {
  81.                  mouseD = false;//左键松开
  82.                  objDrag = "";
  83.  
  84.                  if (isIE) {
  85.                      objDiv.releaseCapture();
  86.                      //objDiv.filters.alpha.opacity = 100;    //当鼠标左键松开后透明度改变
  87.                  } else {
  88.                      window.releaseEvents(objDiv.MOUSEMOVE);  //释放鼠标拖动事件
  89.                      //objDiv.style.opacity = 1;              //当鼠标左键松开后透明度改变
  90.                  }
  91.              }
  92.  
  93.              document.onmousemove = function(evnt) {
  94.                  var evnt = evnt ? evnt : event;
  95.  
  96.                  if (mouseD == true && objDrag) {
  97.                      var mrx = evnt.clientX - mx;
  98.                      var mry = evnt.clientY - my;
  99.                      objDiv.style.left = parseInt(objDiv.style.left) + mrx + "px";
  100.                      objDiv.style.top = parseInt(objDiv.style.top) + mry + "px";
  101.                      mx = evnt.clientX;
  102.                      my = evnt.clientY;
  103.                  }
  104.              }
  105.          </script>
  106.      </body>
  107.  </html>

alert01.css 文件对应源码如下所示：

alert01.js 文件对应源码如下所示：

insert_map.php 文件对应源码如下所示：

访问链接对应的网址（实际网址依据本地服务配置会有相应的变化）为：http://localhost//webapps/alert-01/alert01.html

页面显示如下图所示：

至此， HTML-002-弹出对话框 顺利完结，希望此文能够给初学 HTML 的您一份参考。

最后，非常感谢亲的驻足，希望此文能对亲有所帮助。热烈欢迎亲一起探讨，共同进步。非常感谢！ ^_^

HTML-002-弹出对话框的更多相关文章

  1. 10.JAVA之GUI编程弹出对话框Dialog

    在上节基础上添加对话框显示错误信息. 代码如下: /*弹出对话框显示错误信息,对话框一般不单独出现,一般依赖于窗体.*/ /*练习-列出指定目录内容*/ import java.awt.Button; ...

  2. 【Telerik】弹出对话框RadWindow，确认删除信息

    要做一个删除功能,但是删除前正常都要弹出对话框确认一下是否删除信息,防止误删信息.

  3. Response.Write("<script>alert('弹出对话框！')</script>") 后跟Response.Redirect("page.aspx");不能弹出对话框，直接跳转页面了 如何解？

    Response.Write和Response.Redirect一起用的时候就会这样,write脚本和redirect脚本不能同时使用,这样不会执行脚本,最好使用ClientScript 改进方法: ...

  4. selenium移动div里面的滚动条，操作弹出对话框

    还是使用js来移动 首先要定位到这个元素 倾向于使用js来定位元素,输入下面的脚本,按下回车键,即可在调试页面看到对应的div块$("div.table-responsive") ...

  5. java selenium (十一) 操作弹出对话框

    Web 开发人员通常需要利用JavaScript弹出对话框来给用户一些信息提示, 包括以下几种类型 阅读目录 对话框类型 1.  警告框: 用于提示用户相关信息的验证结果, 错误或警告等 2. 提示框 ...

  6. ABAP 弹出对话框

    一组有用的用户交互窗口函数 显示多条消息 SAP系统用的是这个函数:C14Z_MESSAGES_SHOW_AS_POPUP POPUP_TO_CONFIRM_LOSS_OF_DATA 显示有YES/N ...

  7. AlertDialog.Builder弹出对话框

    在Android中,弹出对话框使用AlertDialog.Builder方法. new AlertDialog.Builder(MainActivity.this).setTitle("本机 ...

  8. Android 手机卫士--弹出对话框

    在<Android 手机卫士--解析json与消息机制发送不同类型消息>一文中,消息机制发送不同类型的信息还没有完全实现,在出现异常的时候,应该弹出吐司提示异常,代码如下: private ...

  9. jQuery学习笔记——弹出对话框

    引用jQuery库文件的<script>标签,必须放在引用自定义脚本文件的<script>标签之前.否则,在编写的代码中将不能引用到jQuery框架 <script ty ...

  10. service里面弹出对话框

    如何在service里面弹出对话框先给一个需求:需要在service里面监听短信的接收,如果接收到短信了,弹出一个dialog来提示用户打开. 看看效果图:(直接在主桌面上弹出) service中弹出 ...

随机推荐

  1. Grunt配置文件编写技巧及示范

    受益于grunt这么久,继续分享关于grunt的一些技巧.grunt确实是前端项目中不可或缺的提升效率的工具.第一次接触grunt是在去年7月份,开始有接触LESS.Coffee Script的等需要 ...

  2. C#中DataTable使用技巧

    在项目中经常用到DataTable,如果DataTable使用得当,不仅能使程序简洁实用,而且能够提高性能,达到事半功倍的效果,现对DataTable的使用技巧进行一下总结. 一.DataTable简 ...

  3. (转)js:字符串(string)转json

    第一种方式: 使用js函数eval(); testJson=eval(testJson);是错误的转换方式. 正确的转换方式需要加(): testJson = eval("(" + ...

  4. ERROR 1045 (28000): Access denied for user 'root'@'localhost' (using password: YES)

    ERROR 1045 (28000): Access denied for user 'root'@'localhost' (using password: YES) ERROR 2013 (HY00 ...

  5. Myeclipse10 + JBPM4.4 环境搭建图文教程

    一.软件环境 IDE:Myeclipse10.0 (jbpm4.0以上版本好像只能与Myeclipse7.5以上版本集成) JBPM:4.4 与Myeclipse集成 1.解压jbpm-4.4.zip ...

  6. 给NSString增加Java风格的方法

    给NSString增加Java风格的方法 文章目录 我实在受不了 NSString 冗长的方法调用了,每次写之前都要查文档.特别是那个去掉前后多余的空格的方法,长得离谱.与之对应的别的语言,拿 jav ...

  7. nVIDIA SDK White Paper －－－－Vertex Texture Fetch Water

    http://blog.csdn.net/soilwork/article/details/713842 nVIDIA SDK White Paper ----Vertex Texture Fetch ...

  8. Gao Big 深圳行

    day 1 来到深圳的国际化大都市之后,首先要做的事情就是···坐地铁?? 到了旅店,已经比较晚了,又折腾了两三下.. day 2 第二天一早,一行人出发来到深圳大学(nv shen su she)参 ...

  9. 一些Discuz!代码

    首行缩进2字符 [code][p=20, 2, left]首行缩进2字符[/p][/code]

  10. MySQL 性能优化的最佳20多条经验分享[转]

    今天,数据库的操作越来越成为整个应用的性能瓶颈了,这点对于Web应用尤其明显.关于数据库的性能,这并不只是DBA才需要担心的事,而这更是我们程序员需要去关注的事情.     当我们去设计数据库表结构, ...