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

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

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

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

 <!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弹出框-01</title>

         <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

         <link rel="stylesheet" type="text/css" href="alert01.css">

         <script type="text/javascript" src= "alert01.js"></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.php" method="post">

                     <p id="info">

                     编号 : <input type="text" name="id" /> </br>

                     名称 : <input type="text" name="name" /> </br>

                     等级 : <input type="text" name="level" /></br>

                     年级 : <input type="text" name="lon" /> </br>

                     班级 : <input type="text" name="lat" /> </br>

                     </p>

                     <input type="submit" value="提交" />

                     <input type="reset" value="重置" onclick="clearinfo()"/>

                     <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>

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. wp7 HubTile

    在最新的Windows Phone Toolkit中我们可以看到HubTile这个控件,首先先了解下什么是HubTile,简单来说,就是允许你给你的应用程序添加些生动或富有意义的瓦片(Tile).Hu ...

  2. html页面元素加载顺序

    一般来说,添加背景图片有三种办法: 直接写在标签的style里面,如: <div style="background-image:url('images/Css.JPG')" ...

  3. POJ 3071 Football(概率DP)

    题目链接 不1Y都对不住看过那么多年的球.dp[i][j]表示i队进入第j轮的概率,此题用0-1<<n表示非常方便. #include <cstdio> #include &l ...

  4. 使 SortList 实现重复键排序

    SortList 默认对按Key来排序,且Key值不能重复,但有时可能需要用有重复值的Key来排序,以下是实现方式: 1.对强类型:以float为例 #region 使SortList能对重复键排序 ...

  5. php5全版本绕过open_basedir读文件脚本

    这是前段时间写的代码了(http://www.weibo.com/1074745063/ByAPqj7s0),最近一直忙着和几个同学一起做非安全类的创业项目.所以也没拿到JAE.SAE测试一下. 不说 ...

  6. 《GK101任意波发生器》升级固件发布（版本：1.0.2.build126）

    一.固件说明: 硬件版本:0,logic.3 固件版本:1.0.2.build126 编译日期:2014-08-23 ====================================== 二. ...

  7. Ubuntu 12.04 LTS 及ubuntu14.10 -- NFS安装

    在Linux 服务器上配置好NFS 根文件系统后,在单板侧挂载NFS 文件系统,具体操作如下:ifconfig eth0 hw ether 00:10:85:18:01:84 /*配置MAC地址*/i ...

  8. VNC与Windows之间的复制粘贴

    假设目标主机是Linux,终端主机是Windows(就是在Windows上使用VNC登陆Linux): 在Linux中执行: vncconfig -nowin& 在Linux选中文字后,无需其 ...

  9. typecho流程原理和插件机制浅析（第一弹）

    typecho流程原理和插件机制浅析(第一弹) 兜兜 393 2014年03月28日 发布 推荐 5 推荐 收藏 24 收藏,3.5k 浏览 虽然新版本0.9在多次跳票后终于发布了,在漫长的等待里始终 ...

  10. python实践3：cursor() — 数据库连接操作

    python 操作数据库,要安装一个Python和数据库交互的包MySQL-python-1.2.2.win32-py2.5.exe,然后我们就可以使用MySQLdb这个包进行数据库操作了. 操作步骤 ...