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

随机推荐

Qt调用WebService
从网上查找Qt调用WebService的方案,需要下载三方的类库,而且需要使用好几个控制台命令,才能生成代理客户端类.因为只是简单的测试,没有采用这种方式,直接使用HTTP的Get获取网站内容,也非常 ...
BZOJ 2456 mod
又见神TM卡内存题.这道题是要求众数. 怎么求呢?首先这道题要求众数的个数大于一半,因此我们读入一个,如果和rec不一样就cnt--.如果cnt<=0了,则更新rec为当前数. 听起来很有问题? ...
__toString()与__call()
__toString()适用于直接输出类,用此方法,可以避免出错:__call()适用于使用类当中没有定义的函数(方法) <!DOCTYPE html> <html> < ...
HDU 1080
http://acm.hdu.edu.cn/showproblem.php?pid=1080 二维最长公共子序列 #include <iostream> #include <cstd ...
NSIS
NSIS 是“Nullsoft 脚本安装系统”(Nullsoft Scriptable Installation System) 的缩写,它是一个免费的 Win32 安装.卸载系统,采用了简洁高效的脚 ...
Jquery 中toggle的用法举例
toggle用法是使得两个以上的方法交替出现. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ...
Magento给新产品页面添加分页
本文介绍如何让magento创建一个带分页功能的新到产品页面,方便我们在首页或者其它CMS Page调用和展示新到产品. 在Magento我们经常有的做法是建立一个可以调用新产品的block,然后通过 ...
简单的IOS6和IOS7通过图片名适配
在美工提供图片图片的前提下,只需要下面给UIImage做一个分类,就可以简单的实现在6和7上的图片名字适配. 比如美工在6上面提供的图片叫common_button_big_red_highlight ...
LeetCode Majority Element（简单题）
题意: 给一个数组,其中有一个元素的出现次数已经超过数组的一半大小,请找出这个元素? 思路: 可以扫一遍数组,将这个出现次数过多的元素抵消其他的元素,最后必定留下1个以上的元素,就是它自己了. pyt ...
TC Hash Filter
Overview The u32 filter allows you to match on any bit field within a packet, so it is in some ways ...

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

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

随机推荐

热门专题