可拖动DIV提示框

1. /*
2.     wanMessageBox弹出框
3.     msg: 将要显示的信息,如果需要换行以 々 符号隔开
4.     rowHeight: 每行显示的高度,
5.     width:消息框的宽度
6. */
7. function wanMessageBox(msg, rowHeight, width){
8.     var pop = window.createPopup();
10.     var _msg = "";
11.     var arr = msg.split('々');
12.     var rowCount = arr.length+1;
13.     for(var i=0;i<arr.length;i++){
14.         if(_msg != "") _msg += "<br />  ";
15.         _msg += arr[i];
16.     }
18.     var w = width;
19.     var h = rowCount * rowHeight + 30;
20.     /*
21.       //居中显示
22.     var l = (document.body.clientWidth - w) / 2;
23.     var t = (document.body.clientHeight - h) / 2;
24.     */
25.     /*
26.       //显示在右下方
27.     */
28.     var l = document.body.scrollWidth - w - 1;
29.     var t = document.body.clientHeight - h - 1;
31.     var container = document.createElement("div");
33.     var items = document.createElement("div");
34.     items.style.cssText = "z-index:50001; background:#fff; top:" + t + "px; left:" + l + "px; width:" + w + "px; height:" + h + "px; border:4px double #99CCFF;font-size:14px; font-family:宋体;position:absolute;";
35.     items.onmousedown = mousedown;
37.     var title = document.createElement("div");
38.     title.style.cssText = "width:100%; height:26px; cursor:move; line-height:26px; padding-left:5px; background:#fff; border-bottom:1px solid #99CCFF;filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr=#99CCFF, EndColorStr=#EEF7FF);";
40.     var title_left = document.createElement("div");
41.     title_left.style.cssText = "float:left;font-weight:bold; color: #113DAE;";
42.     title_left.innerText = "系统消息";
44.     var title_right = document.createElement("div");
45.     title_right.style.cssText = "float:right; font-family:Webdings; font-size:16px; color: white; text-align:center; width:40px; cursor: pointer;filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr=#F0172D, EndColorStr=#ECF5FF);";
46.     title_right.onclick = _hide;
47.     title_right.innerText = "r";
49.     var message = document.createElement("div");
50.     message.style.cssText = "padding:10px;margin:0; line-height:130%; color:black;";
51.     message.innerHTML = "  " + _msg;
53.     title.appendChild(title_left);
54.     title.appendChild(title_right);
55.     items.appendChild(title);
56.     items.appendChild(message);     
57.     container.appendChild(items);
58.     
59.     var bgDiv = document.createElement("div");
60.     bgDiv.style.cssText = " Z-INDEX: 50000; FILTER: alpha(opacity=50); LEFT: 0px; WIDTH: 100%; POSITION: absolute; TOP: 0px; HEIGHT: 100%; BACKGROUND-COLOR: #BCBCBC; moz-opacity: 0.5; opacity: 0.5";
61.     bgDiv.onmouseup = function(){return false;}
62.     bgDiv.onmousemove = function(){return false;}
63.     bgDiv.onmousedown = function(){return false;}
64.     bgDiv.onmousedown = function(){return false;}
65.     bgDiv.ondblclick = function(){return false;}
66.     bgDiv.onclick = function(){return false;}
67.     bgDiv.oncontextmenu = function(){return false;}
68.     bgDiv.onselectstart = function(){return false;}
70.     document.body.appendChild(container);
71.     document.body.appendChild(bgDiv);
73.     _setSelectDisplay("none");
75.     var x,y,dragObj; 
76.     function mousedown(){
77.         var obj = event.srcElement.parentNode;
78.         dragObj = obj;
79.         dragObj.onmousemove = mousemove;
80.         dragObj.onmouseup = mouseup;
81.         dragObj.setCapture();
82.         
83.         oEvent = window.event ? window.event : event;
84.         x = oEvent.clientX;
85.         y = oEvent.clientY;
86.     };
87.     function mousemove(){
88.         oEvent = window.event ? window.event : event;
89.         var _top = oEvent.clientY - y + parseInt(dragObj.style.top);
90.         var _left = oEvent.clientX - x + parseInt(dragObj.style.left);
91.         if(_left < 1) _left = 1;
92.         if(_top < 1) _top = 1;
93.         var sw = document.body.scrollWidth - dragObj.offsetWidth - 1;
94.         var sh = document.body.clientHeight - dragObj.offsetHeight - 1;
95.         if(_left > sw) _left = sw;
96.         if(_top > sh) _top = sh;
97.         
98.         try{
99.             dragObj.style.top = _top + "px";
100.             dragObj.style.left = _left + "px";
101.         }
102.         catch(e){ }
103.         x =  oEvent.clientX;
104.         y =  oEvent.clientY
105.     };
106.     function mouseup(){
107.         dragObj.onmousemove = null;
108.         dragObj.onmouseup = null;
109.         dragObj.releaseCapture();
110.         dragObj = null;
111.     };
113.     function _hide(){
114.         container.style.display = "none";
115.         bgDiv.style.display = "none";
116.         _setSelectDisplay("");
117.     };
119.     function _setSelectDisplay(dis){
120.         var selects = document.getElementsByTagName("select");
121.         for(var i=0;i<selects.length;i++){
122.             selects[i].style.display = dis;
123.         }
124.     };
125. }

 

1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
2. <HTML>
3.  <HEAD>
4.   <TITLE> New Document </TITLE>
5.   <META NAME="Generator" CONTENT="EditPlus">
6.   <META NAME="Author" CONTENT="">
7.   <META NAME="Keywords" CONTENT="">
8.   <META NAME="Description" CONTENT="">
9.   <script type="text/javascript" src="wanMessageBox.js"></script>
10.   <script type="text/javascript">
11.     function show(msg){
12.         var p = new wanMessageBox(msg, 22, 340);
13.     }
14.   </script>
15.  </HEAD>
17.  <BODY style="margin:0px; padding:0px;">
18.     <input type="button" onclick="show('北京奥运会北京奥运会北京奥运会北京奥运会々<font color=red><b>恭喜福建龙岩小姑娘夺得蹦床金牌</b></font>々北京奥运会北京奥运会北京奥运会北京奥运会々北京欢迎您！');" value="show">
19.     <select style="width:100px;"></select>
20.  </BODY>
21. </HTML>