以前项目中用到,在IE下测试可行,今天再修改可兼容FF。
var $; var lastScrollY = 0; var currentMoveObj = null; //当前拖动对象 var relLeft; //鼠标按下位置相对对象位置 var relTop; /*************************** *定义公用方法:查找对象(ID) ***************************/ if (!$ && document.getElementById) { $ = function() { var elements = new Array(); for (var i = 0; i < arguments.length; i++) { var element = arguments[i]; if (typeof element == 'string') { element = document.getElementById(element); } if (arguments.length == 1) { return element; } elements.push(element); } return elements; }; } else if (!$ && document.all) { $ = function() { var elements = new Array(); for (var i = 0; i < arguments.length; i++) { var element = arguments[i]; if (typeof element == 'string') { element = document.all[element]; } if (arguments.length == 1) { return element; } elements.push(element); } return elements; }; } /************************************** *定义公用方法:返回层的高度,宽度 **************************************/ function Alf() { return (self.innerHeight || document.documentElement.clientHeight || document.body.clientHeight); } function Aml() { return (document.documentElement.offsetWidth || document.body.offsetWidth); } /************************************** *定义公用方法:弹出消息对话框提示信息 **************************************/ function showMsgWin(msg,tit) { setHideEleByTagName("select","none"); tit = (tit == null)?"信息提示":tit; var dd_html = ""; tipsConv = document.createElement("DIV"); tipsConv.id = "tipsConv"; tipsConv.oncontextmenu = function(){return false;}; tipsConv.onSelectstart = function(){return false;}; tipsConv.style.cssText = "background-color:#CCCCCC;position:absolute;z-index:100;filter:alpha(opacity=60);"; tipsConv.style.width = document.body.clientWidth; tipsConv.style.height = Alf();//document.body.scrollHeight; //tipsConv.style.pixelTop = 0; tipsConv.style.left = 0; tipsConv.style.top = 0; tipsConv.style.display = "block"; tipsConv.style.opacity="0.5"; document.body.appendChild(tipsConv); dd_html += '<div style="text-align:center;border:solid 2px #C3D9FF;background:#ffffff">'; dd_html += ' <div id="tip" onmousedown="f_down(event);" onmousemove="f_move(event);" onmouseup="f_mouseup(event);" style="float:top;top:0px;width:100%;height:20px;background:#C3D9FF">'; dd_html += ' <p>' + tit + '</p>'; dd_html += ' </div>'; dd_html += ' <div style="background:#ffffff">'; dd_html += ' <p> </p>'; dd_html += ' <font color="red">'; dd_html += ' <p>' + msg + '</p>'; dd_html += ' </font>'; dd_html += ' <p> </p>'; dd_html += ' <p align="center"><a href="javascript:closeTips()">【关 闭】</a> </p>'; dd_html += ' </div>'; dd_html += '</div> '; tips = document.createElement("DIV"); tips.id = "tipDiv"; tips.innerHTML = dd_html; tips.style.cssText = "width:390px;position:absolute;z-index:100;"; //tips.style.pixelTop = lastScrollY + 120; tips.style.top = lastScrollY + 120; tips.style.left = (document.body.offsetWidth - 400) / 2; tips.style.display = "block"; document.body.appendChild(tips); //drag("tipDiv"); } function closeTips(){ setHideEleByTagName("select",""); if($("tipsConv")){ document.body.removeChild($("tipsConv")); } if($("tipDiv")){ document.body.removeChild($("tipDiv")); } if($("tipIFrame")){ document.body.removeChild($("tipIFrame")); } } /**************************** *定义公用方法:显示提示信息 *****************************/ function setHideEleByTagName(tagName,sty1){ var tmp = document.getElementsByTagName(tagName); for(var i = 0; i < tmp.length; i++){ tmp[i].style.display = sty1; } } /********************* *窗口移动 *LUMIN2008-09-11 *修改:2010-02-24 **********************/ function f_down(ev){ ev = (ev)?ev:window.event; currentMoveObj = $("tipDiv"); //当对象被按下时,记录该对象 currentMoveObj.style.position = "absolute"; $("tip").style.cursor = "move"; //document.ondragstart = "return false;" //document.onselectstart = "return false;" document.onselect = "document.selection.empty();" relLeft = ev.clientX+document.body.scrollLeft-currentMoveObj.offsetLeft; relTop = ev.clientY+document.body.scrollTop-currentMoveObj.offsetTop; //if(currentMoveObj.setCapture)currentMoveObj.setCapture(); //else if(window.captureEvents) window.captureEvents(Event.MOUSEMOVE|Event.MOUSEUP); } function f_mouseup(ev) { //if(currentMoveObj.releaseCapture) currentMoveObj.releaseCapture(); //else if(window.captureEvents) window.captureEvents(Event.MOUSEMOVE|Event.MOUSEUP); $("tip").style.cursor = ""; currentMoveObj = null; //当鼠标释放时同时释放拖动对象 document.ondragstart = null; document.onselectstart = null; document.onselect = null; } function f_move(ev) { if(currentMoveObj != null && currentMoveObj==$("tipDiv")){ ev = (ev)?ev:window.event; $("tip").style.cursor = "move"; currentMoveObj.style.left=ev.clientX+document.body.scrollLeft-relLeft; currentMoveObj.style.top=ev.clientY+document.body.scrollTop-relTop; } }
测试:
<script type="text/javascript" charset="gb2312" language="javascript" src="common.js"></script> <input type="button" value="show" onclick="showMsgWin('hello this is my test demo!')"/>