原生js彈窗元件練習
阿新 • • 發佈：2019-02-02
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>無標題文件</title> <style> *{margin:0;padding:0;} body{margin:0;font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-size:14px;line-height:20px;color:#333;height:1000px;} a{color:#08c;text-decoration:none;} a:hover,a:focus{color:#005580;text-decoration:underline;cursor:pointer;} .showBtn{width:700px;margin:20px auto;} p{line-height:26px;padding:3px 0;} input{width:100px;height:26px;line-height:26px;background:#eee;border:1px #ccc solid;cursor:pointer;color:#F66;margin-left:6px;} h4{font-size:17.5px;margin:10px 0;font-family:inherit;font-weight:bold;line-height:20px;color:inherit;text-rendering:optimizelegibility} .popwind{width:360px;padding:32px 0;border-radius:6px;background:#f0f0f0;display:none;overflow:hidden;} .popwind h3.mytitle{width:100%;height:30px;border-bottom:2px #ddd solid;position:absolute;top:0;left:0;text-indent:1em;line-height:30px;z-index:0;} .popwind .content{position: relative;max-height: 400px;padding: 15px;overflow-y: auto;} .popwind .title{border:1px solid #eee;} .popwind .tclose{font-size:16px;position:absolute;right:8px;top:3px;cursor:pointer;z-index:9;} .master{position:absolute;background:#000;opacity:0;filter:alpha(opacity = 0);left:0;top:0;} .popwind .dragbar,.popwind .mytitle{cursor:move;} .popwind .bigest,.popwind .midBtn{position:absolute;top:8px;right:26px;border:1px #666 solid;border-top:3px #676767 solid;width:12px;height:8px;cursor:pointer;z-index:5;} .popwind .midBtn{border:2px #666 solid;border-top:3px #676767 solid;border-bottom:3px #676767 solid;width:10px;height:5px;} .popwind .popbottom{position:absolute;left:0;bottom:0;border-top:2px #39F solid;width:100%;height:30px;line-height:30px;} .asbanner{background:none;} .asbanner .content{display:none;border:1px #06C solid;} .asbanner .easyshow{width:60px;height:30px;line-height:30px;border:2px #06F solid;text-align:center;border-radius:4px;display:block;position:absolute;left:0;top:32px;} .asbanner .minBtn{text-align:center;padding:0 6px;width:60px;height:32px;line-height:32px;position:absolute;right:0;top:0;background:#f0f0f0;border:1px #06c solid;border-bottom:none;cursor:pointer;} </style> <!--<script src="dialog.js"></script>--> <script> window.onload = function(){ var aInp = document.getElementsByTagName('input'); var aDiv = getByClass(document,'div','popwind'); var aA = getByClass(document,'a','easyshow'); var pop1 = new Popup(aDiv[0]); aInp[0].onclick = function(){ pop1.init({ pos:'center', title:'我是標題' }); pop1.topClose(); }; var pop2 = new Popup(aDiv[0]); aInp[1].onclick = function(){ pop2.init({ pos:'center', title:'我是標題' }); pop2.topClose(); pop2.mast(); }; aInp[2].onclick = function(){ pop2.init({ pos:'center', title:'我是標題' }); pop2.topClose(); pop2.mast(); pop2.moveIn(); }; aInp[3].onclick = function(){ pop2.init({ pos:'center', title:'我是標題', moveIn:true }); pop2.topClose(); pop2.mast(); pop2.fixedPos(); pop2.moveIn(); }; var pop3 = new Popup(aDiv[1]); aInp[4].onclick = function(){ pop3.init({ pos:'center', title:'我是標題', moveIn:true }); pop3.topClose(); pop3.mast(); pop3.fixedPos(); pop3.moveIn(); pop3.bigBtn(); }; aInp[5].onclick = function(){ pop3.init({ pos:'center', title:'我是標題', moveIn:true }); pop3.topClose(); pop3.mast(); pop3.fixedPos(); pop3.dragbar(); pop3.moveIn(); }; aInp[6].onclick = function(){ var pop4 = new Popup(aDiv[2]); pop4.init({ pos:'left-center' }); pop4.fixedPos(); pop4.minimize(); }; } var PopBig = true; var PopMid = true; function Popup(obj){ this.obj = obj; this.settings = { pos:'center', title:'', moveIn:true }; this.dragable = true; this.obj.tit = true; }; Popup.prototype.init = function(opt){ extend( this.settings , opt || {} ); this.obj.style.display = 'block'; this.setPos(); var title = this.settings.title || this.obj.title; this.obj.title = ''; if(this.obj.tit){ var oTitle = document.createElement('h3'); oTitle.className = 'mytitle'; oTitle.innerHTML = title; this.obj.appendChild(oTitle); this.obj.tit = false; } this.popClose(); }; Popup.prototype.topClose = function(){ var This = this; var oClose = document.createElement('span'); oClose.className = 'tclose'; oClose.innerHTML = 'x'; this.obj.appendChild(oClose); this.tclose = getByClass(this.obj,'span','tclose')[0]; oClose.onclick = function(){ This.fnClose.call(This); } }; Popup.prototype.popClose = function(){ var This = this; var closePop = getByClass(this.obj,'input','popclose'); for(var i=0;i<closePop.length;i++){ closePop[i].onclick = function(){ This.fnClose.call(This); } } }; Popup.prototype.fnClose = function(){ var This = this; this.obj.removeChild(this.tclose); if(this.settings.movein){ startMove(this.obj,{opacity:0,top:-80},function(){ This.obj.style.display = 'none'; }); setTimeout(function(){ startMove(This.oMast,{opacity:0},function(){ document.body.removeChild(This.oMast); }); },300) }else{ This.obj.style.display = 'none'; this.oMast && startMove(this.oMast,{opacity:0},function(){ document.body.removeChild(This.oMast); }); } }; Popup.prototype.setPos = function(){ if(this.settings.pos == 'center'){ this.obj.style.position = 'absolute'; if(veiwWidth()<this.obj.offsetWidth){ this.obj.style.left ='0px'; }else if(veiwHeight()<this.obj.offsetHeight){ this.obj.style.top =0+scrollY()+'px'; }else{ this.obj.style.left = (veiwWidth() - this.obj.offsetWidth)/2 + 'px'; this.obj.style.top = (veiwHeight() - this.obj.offsetHeight)/2 + scrollY() + 'px'; } }else if(this.settings.pos == 'right-bottom'){ this.obj.style.position = 'absolute'; this.obj.style.left = veiwWidth() - this.obj.offsetWidth + 'px'; this.obj.style.top = veiwHeight() - this.obj.offsetHeight + scrollY() + 'px'; }else if(this.settings.pos == 'left-center'){ this.obj.style.position = 'absolute'; this.obj.style.left = 0 + 'px'; this.obj.style.top = (veiwHeight() - this.obj.offsetHeight)/2 + scrollY() + 'px'; } }; Popup.prototype.fixedPos = function(){ var This = this; window.onscroll = function(){ //This.easyState = true; This.setPos(); }; }; Popup.prototype.mast = function(){ var This = this; var oDiv = document.createElement('div'); oDiv.className = 'master'; oDiv.style.width = veiwWidth() + 'px'; oDiv.style.height = veiwHeight() + 'px'; oDiv.style.zIndex = '666'; this.obj.style.zIndex = '667'; document.body.appendChild(oDiv); this.oMast = getByClass(document,'div','master')[0]; startMove(this.oMast,{opacity:40}); if(window.attachEvent){ window.attachEvent('resize',function(){ This.oMast.style.width = veiwWidth() + 'px'; This.oMast.style.height = veiwHeight() + 'px'; }); window.attachEvent('scroll',function(){ This.oMast.style.top = scrollY() + 'px'; }); }else{ window.addEventListener('resize',function(){ This.oMast.style.width = veiwWidth() + 'px'; This.oMast.style.height = veiwHeight() + 'px'; },false); window.addEventListener('scroll',function(){ This.oMast.style.top = scrollY() + 'px'; },false); } }; Popup.prototype.dragbar = function(){ this.dragBar = getByClass(this.obj,'h3','mytitle')[0]; var d = new drag(this.dragBar,this.obj); d.init(); }; Popup.prototype.moveIn = function(){ this.obj.style.top = '-200px'; this.obj.style.opacity = '0'; startMove(this.obj,{top:Math.floor((veiwHeight() - this.obj.offsetHeight)/2),opacity:100}) }; Popup.prototype.bigBtn = function(){ var This = this; var big = document.createElement('span'); big.className = 'bigest'; if(PopBig){ this.obj.appendChild(big); PopBig = false; } this.bigBtn = getByClass(this.obj,'span','bigest')[0]; this.bigBtn.onclick = function(){ This.changeBig(); } this.W = css(this.obj,'width'); this.H = css(this.obj,'height'); }; Popup.prototype.changeBig = function(){ this.obj.style.left = '0'; this.obj.style.top = '0'; this.obj.style.width = veiwWidth()+'px'; this.obj.style.height = veiwHeight()-2*parseInt(css(this.obj,'padding'))+'px'; this.bigBtn.style.display = 'none'; if(PopMid){ this.midBtn(); } this.midBtn.style.display = 'block'; }; Popup.prototype.midBtn = function(){ var This = this; var mid = document.createElement('span'); mid.className = 'midBtn'; if(PopMid){ this.obj.appendChild(mid); PopMid = false; } this.midBtn = getByClass(this.obj,'span','midBtn')[0]; this.midBtn.onclick = function(){ This.changeMid(); } }; Popup.prototype.changeMid = function(){ this.obj.style.width = parseInt(this.W) + 'px'; this.obj.style.height = parseInt(this.H) + 'px'; this.setPos(); this.midBtn.style.display = 'none'; this.bigBtn.style.display = 'block'; } Popup.prototype.minimize = function(){ this.obj.children[1].style.display = 'block'; var W = parseInt(css(this.obj,'width')); var H = parseInt(css(this.obj,'height')); this.obj.children[1].style.display = 'none'; this.obj.style.display = 'block'; this.easyshow = getByClass(this.obj,'div','easyshow')[0]; this.obj.style.width = this.easyshow.offsetWidth + 'px'; this.obj.style.height = this.easyshow.offsetHeight + 'px'; this.obj.style.background = 'none'; var This = this; this.easyshow.onclick = function(){ This.easyshow.style.display = 'none'; This.obj.children[1].style.display = 'block' startMove(This.obj,{width:W,height:H,top:scrollY()+Math.round((veiwHeight()-H)/2)}); This.minBtn(); This.oMin.style.display = 'block'; This.easyState = false; }; }; Popup.prototype.minBtn = function(){ var This = this; var minBtn = document.createElement('div'); minBtn.className = 'minBtn'; minBtn.innerHTML = '<<收起'; this.obj.appendChild(minBtn); this.oMin = getByClass(this.obj,'div','minBtn')[0]; this.oMin.style.display = 'block'; this.oMin.onclick = function(){ This.changeMin(); }; }; Popup.prototype.changeMin = function(){ var This = this; this.obj.removeChild(this.oMin) this.easyshow.style.display = 'block'; this.easyshow.style.opacity = '0'; this.easyshow.style.filter = 'alpha(opacity = 0)'; startMove(this.obj,{width:This.easyshow.offsetWidth,height:parseInt(css(this.easyshow,'height')),top:scrollY()+Math.round(((veiwHeight()-parseInt(css(this.easyshow,'width')))/2))},function(){ This.obj.children[1].style.display = 'none'; This.easyshow.style.opacity = '1'; This.easyshow.style.filter = 'alpha(opacity = 100)'; }); if(this.easyState){ this.obj.children[1].style.display = 'none'; this.easyshow.style.opacity = '1'; this.easyshow.style.filter = 'alpha(opacity = 100)'; } }; function getByClass(parent, tagName, className) { var aEls = parent.getElementsByTagName(tagName); var arr = []; var serchC = className.split(' ') for (var i=0; i<aEls.length; i++) { var aClass = aEls[i].className.split(' '); for (var j=0; j<aClass.length; j++) { for(var n=0;n<serchC.length;n++){ if (aClass[j] == serchC[n]) { arr.push(aEls[i]); break; } } } } return arr; }; function css(obj,attr){ //獲取樣式 return obj.currentStyle?obj.currentStyle[attr]:getComputedStyle(obj)[attr]; } function veiwWidth(){ //獲取可視區寬 return document.documentElement.clientWidth || document.body.clientHeight; }; function veiwHeight(){ //獲取可視區高 return document.documentElement.clientHeight || document.body.clientHeight; }; function scrollY(){ //滾動條高度 return document.documentElement.scrollTop || document.body.scrollTop; }; function extend(a,b){ //賦值 for(var attr in b){ a[attr] = b[attr]; } }; function startMove(obj, json, fn) { //緩衝運動 clearInterval(obj.iTimer); var iSpeed = 0; var iCur = 0; obj.iTimer = setInterval(function() { var iBtn = true; for (attr in json) { if (attr == 'opacity') { iCur = Math.round(css(obj, attr) * 100); } else { iCur = parseInt(css(obj, attr)); } iSpeed = (json[attr] - iCur) / 6; iSpeed = iSpeed > 0 ? Math.ceil(iSpeed) : Math.floor(iSpeed); if (iCur != json[attr]) { iBtn = false; if (attr == 'opacity') { obj.style.opacity = (iCur + iSpeed) / 100; obj.style.filter = 'alpha(opacity='+ (iCur + iSpeed) +')'; } else { obj.style[attr] = iCur + iSpeed + 'px'; } } } if (iBtn) { clearInterval(obj.iTimer); fn && fn.call(obj); } }, 30); }; function drag(obj,moveEle){ //面向物件的拖拽 this.obj = obj; this.moveEle = moveEle || obj; this.disX = 0; this.disY = 0; }; drag.prototype.init = function(){ //拖拽預設 var This = this; this.obj.onmousedown = function(ev){ var ev = ev || event; This.moveEle.disX = ev.clientX - This.moveEle.offsetLeft; This.moveEle.disY = ev.clientY - This.moveEle.offsetTop; var _this = This; document.onmousemove = function(ev){ var ev = ev || event; var L = ev.clientX - This.moveEle.disX; var T = ev.clientY - This.moveEle.disY; if(L<0){ L=0; }else if(L>veiwWidth()- This.moveEle.offsetWidth){ L = veiwWidth() - This.moveEle.offsetWidth; } if(T<0+scrollY()){ T=0+scrollY(); }else if(T > veiwHeight() - This.moveEle.offsetHeight+scrollY()){ T = veiwHeight()-This.moveEle.offsetHeight+scrollY(); } This.moveEle.style.left = L + 'px'; This.moveEle.style.top = T + 'px'; } document.onmouseup = function(){ document.onmousemove = null; document.onmouseup = null; }; return false; } }; function next(obj){ return obj.nextElementSibling || nextSibling; } function prev(obj){ return obj.previousElementSibling || previousSibling; } </script> </head> <body> <div class="showBtn"> <p>建立一個新彈窗：var pop1 = new Popup(aDiv[0]); //pop1(自定義一個彈窗),aDiv(class名為popwind的div標籤)</p> <p>常規樣式的彈窗：<br />pop1.init({//預設樣式<br /> pos:'center',//彈窗所在位置<br /> title:'我是標題',//標題內容，沒有則可尋找<code><</code>div class="popwind"<code>></code>中的title<br /> });<br /> pop1.topClose();//新增關閉按鈕 <input type="button" value="常規的彈窗" /></p> <p>新增遮罩層: pop2.mast();//新增遮罩層<input type="button" value="添加了遮罩層" /></p> <p>移入效果的彈窗：新增pop2.moveIn();<input type="button" value="移入效果" /></p> <p>滾屏跟隨移動：新增pop2.fixedPos(); <input type="button" value="滾屏移動" /></p> <p>新增最大化按鈕：新增pop2.bigBtn();<input type="button" value="可以最大化" /></p> <p>可以拖拽彈窗：新增pop2.dragbar();;<input type="button" value="可以拖拽" /></p> <p>作為側邊推薦窗：class為'easyshow'裡的內容為簡略狀態 -設定pop3.minimize();<input type="button" value="推薦" /></p> <p>input標籤 新增class"popclose"即可新增關閉彈窗功能</p> </div> <div class="popwind"> <div class="content"> <h4>模態對話方塊中的文字</h4> <p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem.</p> <h4>Popover in a modal</h4> <p>This <a href="#" role="button" class="btn popover-test" title="" data-content="And here's some amazing content. It's very engaging. right?" data-original-title="A Title">button</a> should trigger a popover on click.</p> <h4>Tooltips in a modal</h4> <p><a href="#" class="tooltip-test" title="" data-original-title="Tooltip">This link</a> and <a href="#" class="tooltip-test" title="" data-original-title="Tooltip">that link</a> should have tooltips on hover.</p> <hr> <h4>Overflowing text to show optional scrollbar</h4> <p>We set a fixed <code>max-height</code> on the <code>.modal-body</code>. Watch it overflow with all this extra lorem ipsum text we've included.</p> <p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p> <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p> <p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p> <p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p> <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p> <p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p> </div> <div class="popbottom"><input type="button" value="完成" class="popclose eee" /><input type="button" value="關閉" class="popclose" /></div> </div> <div class="popwind"> <div class="content"> <h4>模態對話方塊中的文字</h4> <p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem.</p> <h4>Popover in a modal</h4> <p>This <a href="#" role="button" class="btn popover-test" title="" data-content="And here's some amazing content. It's very engaging. right?" data-original-title="A Title">button</a> should trigger a popover on click.</p> <h4>Tooltips in a modal</h4> <p><a href="#" class="tooltip-test" title="" data-original-title="Tooltip">This link</a> and <a href="#" class="tooltip-test" title="" data-original-title="Tooltip">that link</a> should have tooltips on hover.</p> <hr> <h4>Overflowing text to show optional scrollbar</h4> <p>We set a fixed <code>max-height</code> on the <code>.modal-body</code>. Watch it overflow with all this extra lorem ipsum text we've included.</p> <p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p> <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p> <p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p> <p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p> <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p> <p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p> </div> <div class="popbottom"></div> </div> <div class="popwind asbanner" title="推薦"> <div class="easyshow"><a href="javascript:;">收起狀態</a></div> <div class="content"> <h4>模態對話方塊中的文字</h4> <p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem.</p> <h4>Popover in a modal</h4> <p>This <a href="#" role="button" class="btn popover-test" title="" data-content="And here's some amazing content. It's very engaging. right?" data-original-title="A Title">button</a> should trigger a popover on click.</p> <h4>Tooltips in a modal</h4> <p><a href="#" class="tooltip-test" title="" data-original-title="Tooltip">This link</a> and <a href="#" class="tooltip-test" title="" data-original-title="Tooltip">that link</a> should have tooltips on hover.</p> <hr> <h4>Overflowing text to show optional scrollbar</h4> <p>We set a fixed <code>max-height</code> on the <code>.modal-body</code>. Watch it overflow with all this extra lorem ipsum text we've included.</p> <p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p> <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p> <p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p> <p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p> <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p> <p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p> </div> </div> </body> </html>