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

来源：www.divcss5.com

复制代码
  1 <html>
  2     <head>
  3     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  4     <title>DIVCSS5可拖动DIV提示窗口</title>
  5         <script language="javascript">
  6             function alertWin(title, msg, w, h)
  7             {
  8                 var titleheight = "22px"; // 提示窗口标题高度
  9                 var bordercolor = "#666699"; // 提示窗口的边框颜色
 10                 var titlecolor = "#FFFFFF"; // 提示窗口的标题颜色
 11                 var titlebgcolor = "#666699"; // 提示窗口的标题背景色
 12                 var bgcolor = "#FFFFFF"; // 提示内容的背景色
 13             
 14                 var iWidth = document.documentElement.clientWidth;
 15                 var iHeight = document.documentElement.clientHeight;
 16                 var bgObj = document.createElement("div");
 17                 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;";
 18                 document.body.appendChild(bgObj);
 19             
 20                 var msgObj=document.createElement("div");
 21                 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;";
 22                 document.body.appendChild(msgObj);
 23             
 24                 var table = document.createElement("table"); //www.divcss5.com divcss5
 25                 msgObj.appendChild(table);
 26                 table.style.cssText = "margin:0px;border:0px;padding:0px;";
 27                 table.cellSpacing = 0;
 28                 var tr = table.insertRow(-1);
 29                 var titleBar = tr.insertCell(-1);
 30                 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;
 31                 titleBar.style.paddingLeft = "10px";
 32                 titleBar.innerHTML = title;
 33                 var moveX = 0;
 34                 var moveY = 0;
 35                 var moveTop = 0;
 36                 var moveLeft = 0;
 37                 var moveable = false;
 38                 var docMouseMoveEvent = document.onmousemove; //www.divcss5.com divcss5
 39                 var docMouseUpEvent = document.onmouseup;
 40                 titleBar.onmousedown = function() 
 41                 {
 42                     var evt = getEvent();
 43                     moveable = true;
 44                     moveX = evt.clientX;
 45                     moveY = evt.clientY;
 46                     moveTop = parseInt(msgObj.style.top);
 47                     moveLeft = parseInt(msgObj.style.left);
 48                 
 49                     document.onmousemove = function() 
 50                     {
 51                         if (moveable) 
 52                         {
 53                             var evt = getEvent();
 54                             var x = moveLeft + evt.clientX - moveX; //www.divcss5.com divcss5
 55                             var y = moveTop + evt.clientY - moveY;
 56                             if ( x > 0 &&( x + w < iWidth) && y > 0 && (y + h < iHeight) ) 
 57                             {
 58                                 msgObj.style.left = x + "px";
 59                                 msgObj.style.top = y + "px";
 60                             }
 61                         }
 62                     };
 63                     document.onmouseup = function () 
 64                     {
 65                         if (moveable) 
 66                         {
 67                             document.onmousemove = docMouseMoveEvent; //www.divcss5.com divcss5
 68                             document.onmouseup = docMouseUpEvent;
 69                             moveable = false;
 70                             moveX = 0;
 71                             moveY = 0;
 72                             moveTop = 0;
 73                             moveLeft = 0;
 74                         }
 75                     };
 76                 }
 77             
 78                 var closeBtn = tr.insertCell(-1);
 79                 closeBtn.style.cssText = "cursor:pointer; padding:2px;background-color:" + titlebgcolor;
 80                 closeBtn.innerHTML = "<span style='font-size:15pt; color:"+titlecolor+";'>×</span>";
 81                 closeBtn.onclick = function()
 82                 {
 83                     document.body.removeChild(bgObj);
 84                     document.body.removeChild(msgObj);
 85                 }
 86                 var msgBox = table.insertRow(-1).insertCell(-1);
 87                 msgBox.style.cssText = "font:10pt '宋体';";
 88                 msgBox.colSpan = 2;
 89                 msgBox.innerHTML = msg;
 90             
 91                 // 获得事件Event对象，用于兼容IE和FireFox
 92                 function getEvent() 
 93                 {
 94                     return window.event || arguments.callee.caller.arguments[0];
 95                 }
 96             }
 97         </script>
 98     </head>
 99     <body>
100         <input type="button" value="DIVCSS5" onclick="alertWin('标题','测试内容<a href=\'http://www.divcss5.com\'>CSS</a>内容400是宽度200是高度',400,200);" />
101         <!-- asp.net里面上述按钮用html的button控件即可。 -->
102     </body>
103 </html>
复制代码

 

posted on   华山青竹  阅读(297)  评论(0)  编辑  收藏  举报

编辑推荐：
· .NET Core 中如何实现缓存的预热？
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列：向量存储与相似性搜索在 .NET 中的实现
· 基于Microsoft.Extensions.AI核心库实现RAG应用
· Linux系列：如何用heaptrack跟踪.NET程序的非托管内存泄露
阅读排行：
· TypeScript + Deepseek 打造卜卦网站：技术与玄学的结合
· 阿里巴巴 QwQ-32B真的超越了 DeepSeek R-1吗？
· 如何调用 DeepSeek 的自然语言处理 API 接口并集成到在线客服系统
· 【译】Visual Studio 中新的强大生产力特性
· 2025年我用 Compose 写了一个 Todo App

导航

< 2025年3月 >
日 一 二 三 四 五 六
23 24 25 26 27 28 1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28 29
30 31 1 2 3 4 5
点击右上角即可分享
微信分享提示
SQL AI 助手