【转】弹出可拖动的DIV层提示窗口

来源：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层提示窗口的更多相关文章

echart 时间轴、以及y轴值过大但是变化不大显示感觉不出变化的问题+弹出框拖动div事件
1.时间轴 echart 提供了一种图表,如果x轴是一个时间范围,并且是连续的,如果用传统的数据驱动会很慢,所以用时间轴的方式 function initCurve(_data){ var resul ...
DIV弹出和关闭新DIV
代码用HTML+JS实现: 代码(用HTML+JS实现): <!doctype html> <html lang="UTF-8"> <head> ...
datePiker弹出框被其他div遮挡
最近在做项目的时候,datePiker弹出框被下面的div给遮挡住了,以前也碰到过这样类似的问题,之前直接在style中添加"z-index:1000".但是现在使用angular ...
如何用JavaScript做一个可拖动的div层
可拖动的层在Web设计中用处很多,比如在某些需要自定义风格布局的应用中,控件就需要拖动操作,下面介绍一个,希望可以满足你的需求,顺便学习一下可拖动的层是如何实现的. 下面是效果演示: 这个DIV可以移 ...
jquery实现弹出即消失的提示层
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
js点击弹出div层
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
点击图片或者鼠标放上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 ...
js制作带有遮罩弹出层实现登录小窗口
要实现的效果如下点击“登录”按钮后,弹出登录小窗口,并且有遮罩层(这个名词还是百度知道的,以前只知道效果,却不知道名字) 在没有点击“登录”按钮之前登录小窗口不显示,点击“登录”按钮后小窗口显示,并 ...
div非弹出框半透明遮罩实现全屏幕遮盖css实现
IE浏览器下设置元素css背景为透明: background-color: rgb(0, 0, 0); filter: alpha(opacity=20); 非IE浏览器下设置元素css背景为透明: ...

随机推荐

详解定位—>"position"
position是css中一个重要的属性,他规定元素的定位类型,默认值为static,他的值有5种,absolute,fixed,relative,static,inherit.接下来将详细具体对每一 ...
Android Bluetooth详解（Android英文文档相关译文）
一.Bluetooth Android平台包含了对Bluetooth协议栈的支持,允许机器通过Bluetooth设备进行无线数据交换.应用框架通过Android Bluetooth API访问Blue ...
React Native 弹性布局FlexBox
React Native采用一中全新的布局方式:FlexBox(弹性布局).可以很方便的实现各种复杂布局,是全新的针对web和移动开发布局的一种实现方式. 何为FlexBox? 完整名称为:the f ...
20145210 《Java程序设计》第一周学习总结
教材学习内容总结第一章: 1.Java三大平台,JavaSE的四个组成部分 Java根据应用领域的不同,区分为Java SE.Java EE.Java ME三大平台. 各应用平台的基础:Java S ...
游戏buff设计参见
其实这类帖子并没有多少的设计理论,对于策划的提升和帮助也并不大,原因其实在于其适用性太窄,当我要设计XX象棋的时候,它就滚一边去了. 废话不多说切入正题: 游戏中的BUFF/DEBUFF我们见过很多, ...
POJ 1502 MPI Maelstrom
MPI Maelstrom Time Limit : 2000/1000ms (Java/Other) Memory Limit : 20000/10000K (Java/Other) Total ...
软件工程课程作业（三）--四则运算3（C++）
伙伴链接:http://www.cnblogs.com/haoying1994/ 一.设计思路在此前程序拥有的功能:加减有无负数,除法有无余数以及算式可定制的功能的基础上,此次程序又添加了算式结果的 ...
HTML <meta> 标签遇到<meta http-equiv="refresh" content="0; url=">详解
页面定期刷新,如果加url的,则会重新定向到指定的网页,content后面跟的是时间(单位秒),把这句话加到指定网页的<head></head>里一般也用在实时性很强的应用中, ...
C函数及指针学习1
1 大段程序注释的方法 #if 0#endif 2三字母词以两个问号开始的都要注意 3 字面值(常量) 在整型号字面值后加字符L (long),U(unsigned)说明字符常量为长整型或( ...
zf2 中 new Express 的用法
在使用联表查询时,如查联表条件有多个也可以,但是连接条件在zf2中会自动给列加``符号,所以要加像id = 1 这样的,他自动给1加｀｀就无示执行了,这时候可以使用new Express(''),他里 ...

【转】弹出可拖动的DIV层提示窗口

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

随机推荐

热门专题