`
lexinquan
  • 浏览: 45889 次
  • 性别: Icon_minigender_1
  • 来自: 杭州
社区版块
存档分类
最新评论

弹出遮罩移动层

阅读更多
以前项目中用到,在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>&nbsp;</p>';
	dd_html += '		<font color="red">';
	dd_html += '		  <p>' + msg + '</p>';
	dd_html += '		</font>';
	dd_html += '		<p>&nbsp;</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!')"/>
分享到:
评论

相关推荐

Global site tag (gtag.js) - Google Analytics