弹窗组件的开发练习

最新推荐文章于 2022-07-16 12:12:57 发布
hap2yxx1
最新推荐文章于 2022-07-16 12:12:57 发布
阅读量272
点赞数
分类专栏： js 文章标签： js
本文链接：https://blog.youkuaiyun.com/h26111939/article/details/77247374
版权
js 专栏收录该内容
8 篇文章
订阅专栏
弹窗组件的开发练习

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>我的弹窗组件</title>
<script src="jquery-1.11.1.js"></script>
<style>
*{ margin:0; padding:0;}
body{height:2000px;}
.container{width:300px;height:300px;background:#ccc;margin:0;}
div.btn{}
.dlg{position:absolute;width:300px;height:300px;background:#02cc35;z-index:150;}
.title{width:100%;height:30px;background:#DEECFA;}
.title .text{float:left;display:block;margin-left:50px;line-height:30px;width:200px;text-align:center;}
.title .close{display:block;width:30px;height:24px;float:right;background:#E2E5E7;
	color:#999;margin-top:3px;text-align:center;cursor:pointer;}
.title .close:hover{color:#000;cursor:pointer;}
.svg-container{position:absolute;pacity:1;fitler:alpha(opacity=100);}
.content{width:100%;height:270px;overflow-y:auto;}
#mark{position:absolute;left:0; top:0;background:#000;opacity:0.4;fitler:alpha(opacity=50);z-index:100; }
</style>
<script>
$.fn.scrollUnique = function() {
    return $(this).each(function() {
        var eventType = 'mousewheel';
        // 火狐是DOMMouseScroll事件
        if (document.mozHidden !== undefined) {
            eventType = 'DOMMouseScroll';
        }
        $(this).on(eventType, function(event) {
            // 一些数据
            var scrollTop = this.scrollTop,
                scrollHeight = this.scrollHeight,
                height = this.clientHeight;

            var delta = (event.originalEvent.wheelDelta) ? event.originalEvent.wheelDelta : -(event.originalEvent.detail || 0);        

            if ((delta > 0 && scrollTop <= delta) || (delta < 0 && scrollHeight - height - scrollTop <= -1 * delta)) {
                // IE浏览器下滚动会跨越边界直接影响父级滚动，因此，临界时候手动边界滚动定位
                this.scrollTop = delta > 0? 0: scrollHeight;
                // 向上滚 || 向下滚
                event.preventDefault();
            }        
        });
    });	
};
window.οnlοad=function(){

	var btns=document.getElementsByTagName('button');
	btns[0].οnclick=function(){
        var x=getElementLeft(this);
		var y=getElementTop(this);
		var dlg0=new Dialog({'x':x+this.offsetWidth,'y':y+this.offsetHeight,
				
			});
		dlg0.show();
		btns[1].click();
		btns[2].click();
	};
	btns[1].οnclick=function(){
        var x=getElementLeft(this);
		var y=getElementTop(this);
		var dlg1=new Dialog({'x':100,'y':0,
				
			});
		dlg1.show();
	};
	btns[2].οnclick=function(){
        var x=getElementLeft(this);
		var y=getElementTop(this);
		var dlg2=new Dialog({'x':400,'y':50,
				closeBtn:true,
				markFlag:false,
				content:''
			});
		dlg2.show();
	};



}

var svgNS = 'http://www.w3.org/2000/svg';
function createTag(tag,objAttr){	
	var oTag = document.createElementNS(svgNS , tag);	
	for(var attr in objAttr){
		oTag.setAttribute(attr , objAttr[attr]);
	}	
	return oTag;	
}
//构造函数
function Dialog(opt){
  this.dlg=null;
  //模板
  this.settings={
	title:'标题',
	closeBtn:true,
	markFlag : true
  };
  extend(this.settings,opt);
  this.init();
}
Dialog.prototype.mark={element:null,refNum:0};

Dialog.prototype.init=function(){

}
Dialog.prototype.show=function(){
	this.dlg=document.createElement('div');
	this.dlg.className='dlg';
	this.dlg.innerHTML="<div class='svg-container'><svg class='svg' xmlns='http://www.w3.org/2000/svg' width='100%' height='100%'></svg></div>"+
						"<div class='title'>"+
								"<span class='text'>"+this.settings.title+"</span>"+
								"<span class='close'>X</span>"+
						"</div>"+
						"<div class='content'></div>";

	//为生成的窗口，设置参数
	this.dlg.style.left=this.settings.x+'px';
	this.dlg.style.top=this.settings.y+'px';
	if(!this.settings.closeBtn)
		this.dlg.getElementsByClassName('close')[0].style.display='none';
	document.body.appendChild(this.dlg);
	var existMark=false;
	if(this.mark.element!=null&&this.mark.refNum>0){
		existMark=true;
	}
	
	if(this.settings.markFlag&&existMark){
		this.mark.refNum+=1;
	}else if(this.settings.markFlag){
		this.mark.element=document.createElement('div');
		this.mark.element.id='mark';
		this.mark.element.style.width = viewWidth() + 'px';
		this.mark.element.style.height = viewHeight() + 'px';
		document.body.appendChild(this.mark.element);
		this.mark.refNum=1;
	}
	if(this.settings.content!=null){
		this.dlg.getElementsByClassName('content')[0].innerHTML=this.settings.content;
		$(this.dlg.getElementsByClassName('content')[0]).scrollUnique();
	}
	//关闭按钮绑定点击事件
	this.bindCloseClick();

	var oSvgContainer = this.dlg.getElementsByClassName('svg-container')[0];
	var oSvg=oSvgContainer.getElementsByClassName('svg')[0];
	var oTitle=this.dlg.getElementsByClassName('title')[0];
    var titleHeight=oTitle.offsetHeight;
   
	//oSvgContainer的宽高和偏移值left:-40px;top:-20px;width:40px;height:50px;
	var iWidth=30;
	var iHeight=40;
	var iLeft=-iWidth;
	var iTop=-(iHeight-titleHeight);
	oSvgContainer.style.width=iWidth+'px';
	oSvgContainer.style.height=iHeight+'px';
	oSvgContainer.style.left=iLeft+'px';
	oSvgContainer.style.top=iTop+'px';
	
	var parentWidth =oSvgContainer.offsetWidth;
	var parentHeight=oSvgContainer.offsetHeight;
	var tranPoints=[];
	tranPoints.push({x:0,y:0});
	var x1 = parentWidth;
	var y1 = parentHeight-titleHeight;
	tranPoints.push({x : x1 , y : y1});
	var x2 = parentWidth;
	var y2 = parentHeight;
	tranPoints.push({x : x2 , y : y2});

	var oPath = createTag('path',{fill : '#DEECFA' , d : 'M'+tranPoints[0].x+' '+tranPoints[0].y+' L'+tranPoints[1].x+' '
	+tranPoints[1].y+' L'+tranPoints[2].x+' '+tranPoints[2].y+' Z'});
		
	oSvg.appendChild(oPath);	
}

Dialog.prototype.close=function(){

	removeElement(this.dlg);
}
//为关闭按钮绑定点击事件
Dialog.prototype.bindCloseClick=function(){
	var This=this;
	if(window.addEventListener){ // Mozilla, Netscape, Firefox
		this.dlg.getElementsByClassName('close')[0].addEventListener('click', function(){
				removeElement(This.dlg);
				if(This.settings.markFlag){
					This.mark.refNum-=1;
					if(This.mark.refNum<1){
						removeElement(This.mark.element);
						This.mark.element=null;
						This.mark.refNum=0;
					}
				}
			}, false);
	} else { // IE
		this.dlg.getElementsByClassName('close')[0].attachEvent('onclick',function(){
				removeElement(This.dlg);
				if(This.settings.markFlag){
					This.mark.refNum-=1;
					if(This.mark.refNum<1){
						removeElement(This.mark.element);
						This.mark.element=null;
						This.mark.refNum=0;
					}
				}
			});
	} 
}
//显示或隐藏 关闭按钮
Dialog.prototype.showCloseBtn=function(flag){
	if(flag==true)
		this.dlg.getElementsByClassName('close')[0].style.display='';
	else 
		this.dlg.getElementsByClassName('close')[0].style.display='none';
}
//获取元素的绝对位置left
function getElementLeft(element){
　　var actualLeft = element.offsetLeft;
　　var current = element.offsetParent;

　  while (current !== null){
　　　actualLeft += current.offsetLeft;
　　　current = current.offsetParent;
　 }
	return actualLeft;
}
//获取元素的绝对位置top
function getElementTop(element){
　　var actualTop = element.offsetTop;
　　var current = element.offsetParent;

　　while (current !== null){
　　　actualTop += current.offsetTop;
　　　　current = current.offsetParent;
　　　}
　　return actualTop;
}
function extend(obj1,obj2){
	for(var attr in obj2){
		obj1[attr]=obj2[attr];
	}
}
//移除元素
function removeElement(_element){
         var _parentElement = _element.parentNode;
         if(_parentElement){
                _parentElement.removeChild(_element);
         }
}
function viewWidth(){
	return document.documentElement.clientWidth;
}
function viewHeight(){
	return document.documentElement.clientHeight;
}

</script>
</head>

<body>



<div class='container'>
	<div class='btn'>
		<button type='button'>button1</button>
		<button type='button'>button2</button>
		<button type='button'>button3</button>
	</div>
</div>
</body>
</html>
页面效果