Javascript实现浮动的提示窗口基本很简单

通过Javascript实现浮动的提示窗口基本很简单，也是大大提高用户体验的东西，就像现在cnblogs的提示窗口，总是要转到一个页面来提示，这样会等好一会儿，而javascript实现的东西效果就好了很多，一下就出来了，实现真正无刷新。也可以自定义样式。
这是前段时间自已弄出来的一个实用的小东西，从网摘了部分js代码，弄好了接口，很方便做提示窗口使用
缺点可惜现在暂时对Firefox支持不太好，IE6与IE7通过。
除了基本的可以拖动的浮动层以外，还有并
看代码先～～～

提示窗口的界面：


CSS样式：

 1 
 2 img{
 3     border:0px;
 4 }
 5 
 6 #overlay{
 7     position: absolute;
 8     top: 0;
 9     left: 0;
10     z-index: 99;
11     width: 100%;
12     height: 500px;
13     background-color: #000;
14     filter:alpha(opacity=70);
15     -moz-opacity: 0.6;
16     opacity: 0.6;
17 }
18 
19 .floatDiv{
20     padding:0 0 0 0;    
21     position:absolute; 
22     width:300px; 
23     margin:0 0 0 0; 
24     z-index:100;
25     border:1px solid #DADADA; 
26     background:#FFF; padding:1px;
27 }
28 
29 .floatDiv .divTitle{
30     background:#E0E0E0 url('../images/dragForm/title_bg.gif');
31     background-position:top left;
32     background-repeat:repeat-x;
33     height:25px;
34     line-height:25px;
35     padding:0px 4px;
36     cursor:default;
37 }
38 
39 .floatDiv .divContent{
40     padding:3px; 
41     min-height:100px;
42     height:auto; cursor:default;
43 }
44 
45 .floatDiv .divFoot{
46     background:#F0F0F0; 
47     text-align:right; 
48     padding:4px;
49     background:#E0E0E0 url('../images/dragForm/bottom_bg.gif');
50     background-position:top left;
51     background-repeat:repeat-x;
52 }
53 
54 .floatDiv input.divButton{
55     background:#E0E0E0 url('../images/dragForm/button_bg.gif');
56     background-position:top left;
57     background-repeat:repeat-x;
58     border:1px solid #D1D3D2;
59     height:21px;
60     font-size:12px;
61     padding:2px 5px;
62     color:#626264;
63 }
64 

Javascript代码：

  1 function $(_sId)
  2 {return document.getElementById(_sId);}
  3   
  4 function moveDiv(event, _sId)
  5 {
  6     var oObj = $(_sId);    
  7     oObj.onmousemove = mousemove;
  8     oObj.onmouseup = mouseup;
  9     oObj.setCapture ? oObj.setCapture() : function(){};
 10     oEvent = window.event ? window.event : event;
 11     var dragData = {x : oEvent.clientX, y : oEvent.clientY};
 12     var backData = {x : parseInt(oObj.style.top), y : parseInt(oObj.style.left)};
 13    
 14     function mousemove()
 15     {
 16         var oEvent = window.event ? window.event : event;
 17         var iLeft = oEvent.clientX - dragData["x"] + parseInt(oObj.style.left);
 18         var iTop = oEvent.clientY - dragData["y"] + parseInt(oObj.style.top);
 19         oObj.style.left = iLeft;
 20         oObj.style.top = iTop;
 21         dragData = {x: oEvent.clientX, y: oEvent.clientY};  
 22     }
 23    
 24     function mouseup()
 25     {
 26         var oEvent = window.event ? window.event : event;
 27         oObj.onmousemove = null;
 28         oObj.onmouseup = null;
 29         if(oEvent.clientX < 1 || oEvent.clientY < 1)
 30         {
 31             oObj.style.left = backData.y;
 32             oObj.style.top = backData.x;
 33         }
 34             oObj.releaseCapture ? oObj.releaseCapture() : function(){};
 35     }
 36 }
 37 
 38 function closeDiv(_sID)
 39 {
 40     var oObj = $(_sID);
 41     var overlay = $("overlay");    
 42     if(overlay != null)
 43     {
 44         overlay.outerHTML = "";
 45     }
 46     oObj.style.display = "none";
 47     
 48 }
 49 
 50 function showDiv(_sID,event)
 51 {
 52     var arrySize = getPageSize();
 53     var oObj = $(_sID);
 54     //创建一个DIV,改名为 overlay 这个是透明的层    
 55     var oDiv =document.createElement("div");
 56     oDiv.id = "overlay";
 57     document.body.appendChild(oDiv);
 58     var overlay = $("overlay");
 59     overlay.style.height = arrySize[1];
 60     overlay.style.width = arrySize[0];
 61     //alert(arrySize[1]);    
 62     if(event == null)
 63     {
 64         if(oObj.style.left == "")
 65         {
 66             oObj.style.left = arrySize[0] / 2 - 150 ;
 67         }
 68         
 69         if(oObj.style.top == "")
 70         {
 71             oObj.style.top =  arrySize[0] / 2;
 72         }        
 73     }
 74     else
 75     {        
 76         var iEvent= window.event ? window.event : event;        
 77         oObj.style.left = arrySize[0] / 2 - 150 ; // iEvent.clientX;
 78         oObj.style.top = arrySize[1] / 2 - 150 ;// iEvent.clientY;
 79         
 80     }
 81     
 82     oObj.style.display = "block";
 83     overlay.style.display = "block";
 84     overlay.style.zindex = oObj.style.zindex - 1;
 85 }
 86 
 87 //取得页面大小
 88 function getPageSize(){
 89     
 90     var xScroll, yScroll;
 91     
 92     if (window.innerHeight && window.scrollMaxY) {    
 93         xScroll = document.body.scrollWidth;
 94         yScroll = window.innerHeight + window.scrollMaxY;
 95     } else if (document.body.scrollHeight > document.body.offsetHeight){ // all but Explorer Mac
 96         xScroll = document.body.scrollWidth;
 97         yScroll = document.body.scrollHeight;
 98     } else { // Explorer Macwould also work in Explorer 6 Strict, Mozilla and Safari
 99         xScroll = document.body.offsetWidth;
100         yScroll = document.body.offsetHeight;
101     }
102     
103     var windowWidth, windowHeight;
104     if (self.innerHeight) {    // all except Explorer
105         windowWidth = self.innerWidth;
106         windowHeight = self.innerHeight;
107     } else if (document.documentElement && document.documentElement.clientHeight) { // Explorer 6 Strict Mode
108         windowWidth = document.documentElement.clientWidth;
109         windowHeight = document.documentElement.clientHeight;
110     } else if (document.body) { // other Explorers
111         windowWidth = document.body.clientWidth;
112         windowHeight = document.body.clientHeight;
113     }    
114     
115     // for small pages with total height less then height of the viewport
116     if(yScroll < windowHeight){
117         pageHeight = windowHeight;
118     } else { 
119         pageHeight = yScroll;
120     }
121 
122     // for small pages with total width less then width of the viewport
123     if(xScroll < windowWidth){    
124         pageWidth = windowWidth;
125     } else {
126         pageWidth = xScroll;
127     }
128 
129 
130     arrayPageSize = new Array(pageWidth,pageHeight,windowWidth,windowHeight) 
131     return arrayPageSize;
132 }

HTML代码与调用方式:

 1<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2<html xmlns="http://www.w3.org/1999/xhtml">
 3
 4<head>
 5<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 6<title>无标题 1</title>
 7<link href="styles/drag.css" rel="stylesheet" media="all" />
 8<script type="text/javascript" src="scripts/drag.js"></script>
 9</head>
10
11<body>
12
13<div id="main">
14    <a href="javascript:showDiv('floatDiv');">show</a>
15<input type="button" onclick="showDiv('floatDiv',event);" value="显示在这里" />
16
17</div>
18<div id="floatDiv" class="floatDiv" style="display:none;">
19    <div class="divTitle" onmousedown="moveDiv(event,'floatDiv');">
20        <div style="float:left; width:250px;">提示窗口</div>
21        <div style="float:right;text-align:right; height:25px;" >
22            <a href="javascript:;" onclick="closeDiv('floatdiv');"><img src="images/dragform/ico_close.gif" onmouseout="this.src='images/dragform/ico_close.gif';" onmousemove="this.src='images/dragform/ico_close1.gif';" align="absmiddle" alt="关闭" /></a>
23        </div>        
24    </div>
25    <div class="divContent" >
26        <p>以前自已也有一个博客，写了300多篇，后面工作以后就没有再写了。不知道是不是因为懒了，还是工作太忙的原因，呵呵 
27cnBlogs的博客圈子不错，所以我也插进来，希望能够认识更多业内的朋友。 
28    </p>
29    </div>
30    <div class="divFoot">
31        <input type="button" class="divButton" value="确 定" /> <input type="button" class="divButton" onclick="closeDiv('floatdiv')" value="取 消" />
32    </div>
33</div>
34</body>
35
36</html>
37

Javascript浮动提示窗口源代码下载：https://files.cnblogs.com/huacn/dragDiv.rar

自我评价：这个实现的方式还是不好，在通用性上不方便，每次都得复制代码。
http://www.cnblogs.com/huacn/archive/2007/04/04/700416.aspx