来源：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. CF700C （枚举+tarjan）

    Problem Break up (CF700C) 题目大意 给一张n个点,m条边的无向图,有边权,和起点S,终点T. (n<=1000 , m<=30000) 要求最多割掉2条边,使得S ...

  2. HDU 4971 （最小割）

    Problem A simple brute force problem (HDU 4971) 题目大意 有n个项目和m个问题,完成每个项目有对应收入,解决每个问题需要对应花费,给出每个项目需解决的问 ...

  3. PHP 安全

    作为PHP程序员,特别是新手,对于互联网的险恶总是知道的太少,对于外部的入侵有很多时候是素手无策的,他们根本不知道黑客是如何入侵的.提交入侵.上传漏洞.sql 注入.跨脚本攻击等等.作为最基本的防范你 ...

  4. Qt之qSetMessagePattern

    简述 改变默认的消息处理输出. 允许改变qDebug().qWarning().qCritical().qFatal()的输出. 简述 占位符 示例 qSetMessagePattern QT_MES ...

  5. 听VOA还不如学这些 （转自知乎恶魔奶爸）

    该专栏文章网址 http://zhuanlan.zhihu.com/aisapo/19634180 鉴于知乎无法插图片和音频,所以有了这篇教程集合,大家看这个就足够了其实 每次一学英语,材料无非就是V ...

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

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

  7. SSIS使用OleDB和Ado.Net两种方式调用 存储过程

    在使用”执行 SQL 任务“组件调用存储过程时,连接方式使用OleDB和Ado.Net稍有不同,结合图例说明一下 当我们使用OleDB时,设置的截图如下: 参数使用?来代替,Parameter Nam ...

  8. 学习Linux——计算机概论

    一直想学习Linux,但计划时不时被耽误,现在开始,决定每天开始学习Linux.学习从最简单的开始,一步步,不能将最简单的东西忽略. 1.计算机硬件的五大单元 计算机分为三部分:输入单元,中央处理器即 ...

  9. 矩阵卷积Matlab（转载）

    转载自:http://blog.csdn.net/anan1205/article/details/12313593 两个矩阵卷积转化为矩阵相乘形式--Matlab应用(这里考虑二维矩阵,在图像中对应 ...

  10. 215. Kth Largest Element in an Array

    Find the kth largest element in an unsorted array. Note that it is the kth largest element in the so ...