【转】弹出可拖动的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背景为透明: ...

随机推荐

iOS interface guidelines (界面设计指南)<一>
一. 为iOS而设计 1.iOS体现的主题: (1)Deference(顺从):UI的存在就是为了让顾客更加容易理解和进行交互,而不是要和顾客玩智力游戏 (2)Clarity(清晰):在每个 ...
作业1-我的第一个博客&GuiHub简单练习
自我介绍姓名:苗中峰(不要问有什么含义,翻着字典取的名,翻到什么字就取了什么字) 性别:男(不解释) ...
React Native 组件之TextInput
React Native 组件之TextInput类似于iOS中的UITextView或者UITextField,是作为一个文字输入的组件,下面的TextInput的用法和相关属性. /** * Sa ...
LCA（RMQ）
; xh=; ..lx*] of longint; lt,dfn,fr,dep:..lx] of longint; f:..lx*,..xh] of longint; vis:..lx] of boo ...
MySQL优化—工欲善其事，必先利其器之EXPLAIN(转)
最近慢慢接触MySQL,了解如何优化它也迫在眉睫了,话说工欲善其事,必先利其器.最近我就打算了解下几个优化MySQL中经常用到的工具.今天就简单介绍下EXPLAIN. 内容导航 id select_t ...
vs2013常用快捷键收集
vs2013快捷键: 复制一整行代码: Ctrl+C剪切一整行代码: Ctrl+X删除一整行代码: Ctrl+L跳转到指定的行:ctrl+G 注释:组合键“Ctrl+K+C”取消注释:组合键“Ctrl ...
linux性能监控基础命令
压力测试监控下系统性能方法之一 #top 该命令监控的是进程的信息看图逐行意义 top:执行命令的之间 up:已经执行了277天 2users:目前有两个使用者,使用#who可以查看具体的使用者详情 ...
R中NA和NaN的区别
NA表示的是缺失数据,missing data NaN表示无意义的数据,Not a Number, Inf-Inf Inf表示正无穷大 -Inf表示负无穷大
下载abap 源代码
转自http://blog.sina.com.cn/s/blog_4d1570de0100pvhd.html *@------------------------------------------- ...
C语言学习笔记 -冒泡排序
//冒泡排序 void main(){ , , , , }; ]); ; i<max - ; i++) { for (int j = i; j<max; j++) { if (a[i]&g ...

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

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

随机推荐

热门专题