来源：www.divcss5.com

 <html>

     <head>

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

     <title>DIVCSS5可拖动DIV提示窗口</title>

         <script language="javascript">

             function alertWin(title, msg, w, h)

             {

                 var titleheight = "22px"; // 提示窗口标题高度

                 var bordercolor = "#666699"; // 提示窗口的边框颜色

                 var titlecolor = "#FFFFFF"; // 提示窗口的标题颜色

                 var titlebgcolor = "#666699"; // 提示窗口的标题背景色

                 var bgcolor = "#FFFFFF"; // 提示内容的背景色

                 var iWidth = document.documentElement.clientWidth;

                 var iHeight = document.documentElement.clientHeight;

                 var bgObj = document.createElement("div");

                 bgObj.style.cssText = "position:absolute;left:0px;top:0px;width:"+iWidth+"px;height:"+Math.max(document.body.clientHeight, iHeight)+"px;filter:Alpha(Opacity=30);opacity:0.3;background-color:#000000;z-index:101;";

                 document.body.appendChild(bgObj);

                 var msgObj=document.createElement("div");

                 msgObj.style.cssText = "position:absolute;font:11px '宋体';top:"+(iHeight-h)/2+"px;left:"+(iWidth-w)/2+"px;width:"+w+"px;height:"+h+"px;text-align:center;border:1px solid "+bordercolor+";background-color:"+bgcolor+";padding:1px;line-height:22px;z-index:102;";

                 document.body.appendChild(msgObj);

                 var table = document.createElement("table"); //www.divcss5.com divcss5

                 msgObj.appendChild(table);

                 table.style.cssText = "margin:0px;border:0px;padding:0px;";

                 table.cellSpacing = 0;

                 var tr = table.insertRow(-1);

                 var titleBar = tr.insertCell(-1);

                 titleBar.style.cssText = "width:100%;height:"+titleheight+"px;text-align:left;padding:3px;margin:0px;font:bold 13px '宋体';color:"+titlecolor+";border:1px solid " + bordercolor + ";cursor:move;background-color:" + titlebgcolor;

                 titleBar.style.paddingLeft = "10px";

                 titleBar.innerHTML = title;

                 var moveX = 0;

                 var moveY = 0;

                 var moveTop = 0;

                 var moveLeft = 0;

                 var moveable = false;

                 var docMouseMoveEvent = document.onmousemove; //www.divcss5.com divcss5

                 var docMouseUpEvent = document.onmouseup;

                 titleBar.onmousedown = function()

                 {

                     var evt = getEvent();

                     moveable = true;

                     moveX = evt.clientX;

                     moveY = evt.clientY;

                     moveTop = parseInt(msgObj.style.top);

                     moveLeft = parseInt(msgObj.style.left);

                     document.onmousemove = function()

                     {

                         if (moveable)

                         {

                             var evt = getEvent();

                             var x = moveLeft + evt.clientX - moveX; //www.divcss5.com divcss5

                             var y = moveTop + evt.clientY - moveY;

                             if ( x > 0 &&( x + w < iWidth) && y > 0 && (y + h < iHeight) )

                             {

                                 msgObj.style.left = x + "px";

                                 msgObj.style.top = y + "px";

                             }

                         }

                     };

                     document.onmouseup = function ()

                     {

                         if (moveable)

                         {

                             document.onmousemove = docMouseMoveEvent; //www.divcss5.com divcss5

                             document.onmouseup = docMouseUpEvent;

                             moveable = false;

                             moveX = 0;

                             moveY = 0;

                             moveTop = 0;

                             moveLeft = 0;

                         }

                     };

                 }

                 var closeBtn = tr.insertCell(-1);

                 closeBtn.style.cssText = "cursor:pointer; padding:2px;background-color:" + titlebgcolor;

                 closeBtn.innerHTML = "<span style='font-size:15pt; color:"+titlecolor+";'>×</span>";

                 closeBtn.onclick = function()

                 {

                     document.body.removeChild(bgObj);

                     document.body.removeChild(msgObj);

                 }

                 var msgBox = table.insertRow(-1).insertCell(-1);

                 msgBox.style.cssText = "font:10pt '宋体';";

                 msgBox.colSpan = 2;

                 msgBox.innerHTML = msg;

                 // 获得事件Event对象，用于兼容IE和FireFox

                 function getEvent()

                 {

                     return window.event || arguments.callee.caller.arguments[0];

                 }

             }

         </script>

     </head>

     <body>

         <input type="button" value="DIVCSS5" onclick="alertWin('标题','测试内容<a href=\'http://www.divcss5.com\'>CSS</a>内容400是宽度200是高度',400,200);" />

         <!-- asp.net里面上述按钮用html的button控件即可。 -->

     </body>

 </html>

【转】弹出可拖动的DIV层提示窗口的更多相关文章

  1. echart 时间轴、以及y轴值过大但是变化不大显示感觉不出变化的问题+弹出框拖动div事件

    1.时间轴 echart 提供了一种图表,如果x轴是一个时间范围,并且是连续的,如果用传统的数据驱动会很慢,所以用时间轴的方式 function initCurve(_data){ var resul ...

  2. DIV弹出和关闭新DIV

    代码用HTML+JS实现: 代码(用HTML+JS实现): <!doctype html> <html lang="UTF-8"> <head> ...

  3. datePiker弹出框被其他div遮挡

    最近在做项目的时候,datePiker弹出框被下面的div给遮挡住了,以前也碰到过这样类似的问题,之前直接在style中添加"z-index:1000".但是现在使用angular ...

  4. 如何用JavaScript做一个可拖动的div层

    可拖动的层在Web设计中用处很多,比如在某些需要自定义风格布局的应用中,控件就需要拖动操作,下面介绍一个,希望可以满足你的需求,顺便学习一下可拖动的层是如何实现的. 下面是效果演示: 这个DIV可以移 ...

  5. jquery实现弹出即消失的提示层

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  6. js点击弹出div层

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  7. 点击图片或者鼠标放上hover .图片变大. 1)可以使用css中的transition, transform 2) 预先设置一个 弹出div. 3)弹出层 alert ; 4) 浏览器的宽度document.documentElement.clientWidth || document.body.clientWidth

    变大: 方法一: 利用css属性. 鼠标放上 hover放大几倍. .kecheng_02_cell_content img { /*width: 100px; height: 133px;*/ wi ...

  8. js制作带有遮罩弹出层实现登录小窗口

    要实现的效果如下 点击“登录”按钮后,弹出登录小窗口,并且有遮罩层(这个名词还是百度知道的,以前只知道效果,却不知道名字) 在没有点击“登录”按钮之前登录小窗口不显示,点击“登录”按钮后小窗口显示,并 ...

  9. div非弹出框半透明遮罩实现全屏幕遮盖css实现

    IE浏览器下设置元素css背景为透明: background-color: rgb(0, 0, 0); filter: alpha(opacity=20); 非IE浏览器下设置元素css背景为透明: ...

随机推荐

  1. Python命名规范

    Python 标识符 参见:https://docs.python.org/3/reference/lexical_analysis.html?highlight=identifier#identif ...

  2. yii2归档安装

    1.http://www.yiiframework.com/download/ 下载文件 2.如果inint.bat文件一闪而过,没有提示是开发还是生产环境 用编辑器(phpstorm)打开文件在对应 ...

  3. 定时同步时间与crontab

    date 月日时分年.秒date -s可以直接设置系统时间 比如将系统时间设定成1996年6月10日的命令如下.#date -s 06/10/96将系统时间设定成下午1点12分0秒的命令如下.#dat ...

  4. 用C语言实现评论系统设计 - 无数据库版

  5. nginx源码学习资源（不断更新）

    nginx源码学习是一个痛苦又快乐的过程,下面列出了一些nginx的学习资源. 首先要做的当然是下载一份nginx源码,可以从nginx官方网站下载一份最新的. 看了nginx源码,发现这是一份完全没 ...

  6. 转载几篇关于GNU autotools的文章

    http://www.laruence.com/2009/11/18/1154.html http://www.ibm.com/developerworks/cn/linux/l-makefile/ ...

  7. Markdown 语法说明 (简体中文版)

    http://wowubuntu.com/markdown/#editor 概述 宗旨 兼容 HTML 特殊字符自动转换 区块元素 段落和换行 标题 区块引用 列表 代码区块 分隔线 区段元素 链接 ...

  8. Linux ---pptpd部署

    PPTP 全称为 Point to Point Tunneling Protocol -- 点到点隧道协议,是VPN协议中的一种. 一.CentOS 6.2 下 PPTP VPN 服务器安装 1.安装 ...

  9. Codeforces Round #372 (Div. 2) A B C 水 暴力/模拟 构造

    A. Crazy Computer time limit per test 2 seconds memory limit per test 256 megabytes input standard i ...

  10. c 深度剖析 6

    函数的编码风格 1.注释 2,空行 3,缩进 4,参数长度,代码长度,语句长度要合适. 5,少用全局变量 6,指针仅作输入参数时,可用const 设置其为只读属性,避免其在函数中被修改. 7,函数默认 ...