弹窗组件的开发练习

来源：互联网发布：手机版淘宝盗图技巧编辑：程序博客网时间：2024/05/20 22:35
弹窗组件的开发练习

<!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.onload=function(){var btns=document.getElementsByTagName('button');btns[0].onclick=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].onclick=function(){        var x=getElementLeft(this);var y=getElementTop(this);var dlg1=new Dialog({'x':100,'y':0,});dlg1.show();};btns[2].onclick=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, Firefoxthis.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 { // IEthis.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';}//获取元素的绝对位置leftfunction getElementLeft(element){　　var actualLeft = element.offsetLeft;　　var current = element.offsetParent;　  while (current !== null){　　　actualLeft += current.offsetLeft;　　　current = current.offsetParent;　 }return actualLeft;}//获取元素的绝对位置topfunction 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>
页面效果
阅读全文
0 0