【JQuery】控制元件-實現自定義樣式的彈出視窗和確認框
阿新 • • 發佈：2019-01-26
Html程式碼：
css程式碼：
以上是本人測試過，還可以的彈窗方式。
<!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>js alert confirm樣式彈出框</title>
<link type="text/css" rel="stylesheet" href="css/showBo.css" />
<script type="text/javascript" src="js/showBo.js"></script>
</head>
<body >
<div id="wrap">
<div class="box-163css">
<input type="button" value="Showbo.Msg.alert" onclick="Showbo.Msg.alert('您好，請先註冊或登入!')">
<input type="button" value="Showbo.Msg.confirm" onclick="Showbo.Msg.confirm('您確定刪除這條記錄嗎？')">
</div>
</div>
<div style="text-align:center;margin:10px 0; font:normal 14px/24px 'MicroSoft YaHei';">
<p>適用瀏覽器：IE8、360、FireFox、Chrome、Safari、Opera、傲遊、搜狗、世界之窗.</p>
</div>
</body>
</html>var Showbo={author:'showbo',homepage:'http://www.lenomC100.com'}; //是否為ie瀏覽器 Showbo.IsIE=!!document.all; //ie瀏覽器版本 Showbo.IEVersion=(function(){if(!Showbo.IsIE)return -1;try{return parseFloat(/msie ([\d\.]+)/i.exec(navigator.userAgent)[1]);}catch(e){return -1;}})(); //按id獲取物件 Showbo.$=function(Id,isFrame){var o;if("string"==typeof(Id))o= document.getElementById(Id);else if("object"==typeof(Id))o= Id;else return null;return isFrame?(Showbo.IsIE?frames[Id]:o.contentWindow):o;} //按標籤名稱獲取物件 //頁面的高和寬****************************** Showbo.isStrict=document.compatMode == "CSS1Compat"; Showbo.BodyScale={x:0,y:0,tx:0,ty:0};//（x，y）：當前的瀏覽器容器大小 （tx，ty）：總的頁面滾動寬度和高度 Showbo.getClientHeight=function(){/*if(Showbo.IsIE)*/return Showbo.isStrict ? document.documentElement.clientHeight :document.body.clientHeight;/*else return self.innerHeight;*/} Showbo.getScrollHeight=function(){var h=!Showbo.isStrict?document.body.scrollHeight:document.documentElement.scrollHeight;return Math.max(h,this.getClientHeight());} Showbo.getHeight=function(full){return full?this.getScrollHeight():this.getClientHeight();} Showbo.getClientWidth=function(){/*if(Showbo.IsIE)*/return Showbo.isStrict?document.documentElement.clientWidth:document.body.clientWidth;/*else return self.innerWidth;*/} Showbo.getScrollWidth=function(){var w=!Showbo.isStrict?document.body.scrollWidth:document.documentElement.scrollWidth;return Math.max(w,this.getClientWidth());} Showbo.getWidth=function(full){return full?this.getScrollWidth():this.getClientWidth();} Showbo.initBodyScale=function(){Showbo.BodyScale.x=Showbo.getWidth(false);Showbo.BodyScale.y=Showbo.getHeight(false);Showbo.BodyScale.tx=Showbo.getWidth(true);Showbo.BodyScale.ty=Showbo.getHeight(true);} //頁面的高和寬****************************** Showbo.Msg={ INFO:'info', ERROR:'error', WARNING:'warning', IsInit:false, timer:null, dvTitle:null, dvCT:null, dvBottom:null, dvBtns:null, lightBox:null, dvMsgBox:null, defaultWidth:300, moveProcessbar:function(){ var o=Showbo.$('dvProcessbar'),w=o.style.width; if(w=='')w=20; else{ w=parseInt(w)+20; if(w>100)w=0; } o.style.width=w+'%'; }, InitMsg:function(width){ //ie下不按照新增事件的循序來執行，所以要注意在呼叫alert等方法時要檢測是否已經初始化IsInit=true var ifStr='<iframe src="javascript:false" mce_src="javascript:false" style="position:absolute; visibility:inherit; top:0px;left:0px;width:100%; height:100%; z-index:-1;' +'filter=\'progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=0)\';"></iframe>', html='<div class="top"><div class="right"><div class="title" id="dvMsgTitle"></div></div></div>'+ '<div class="body"><div class="right"><div class="ct" id="dvMsgCT"></div></div></div>'+ '<div class="bottom" id="dvMsgBottom"><div class="right"><div class="btn" id="dvMsgBtns"></div></div></div>'; this.dvMsgBox=document.createElement("div"); this.dvMsgBox.id="dvMsgBox"; this.dvMsgBox.innerHTML+=html; document.body.appendChild(this.dvMsgBox); this.lightBox=document.createElement("div"); this.lightBox.id="ShowBolightBox"; document.body.appendChild(this.lightBox); if(Showbo.IsIE&&Showbo.IEVersion<7){//加iframe層修正ie6下無法遮蓋住select的問題 this.lightBox.innerHTML+=ifStr; this.dvMsgBox.innerHTML+=ifStr; } this.dvBottom=Showbo.$('dvMsgBottom'); this.dvBtns=Showbo.$('dvMsgBtns'); this.dvCT=Showbo.$('dvMsgCT'); this.dvTitle=Showbo.$('dvMsgTitle'); this.IsInit=true; }, checkDOMLast:function(){//此方法非常關鍵，要不無法顯示彈出視窗。兩個物件dvMsgBox和lightBox必須處在body的最後兩個節點內 if(document.body.lastChild!=this.lightBox){ document.body.appendChild(this.dvMsgBox); document.body.appendChild(this.lightBox); } }, createBtn:function(p,v,fn){ var btn=document.createElement("input"); btn.type="button"; btn.className='btn'; btn.value=v; btn.onmouseover=function(){this.className='btnfocus';} btn.onmouseout=function(){this.className='btn';} btn.onclick=function(){ Showbo.Msg.hide(); if(fn)fn(p); } return btn; }, alert:function(msg){ this.show({buttons:{yes:'確認'},msg:msg,title:'訊息'}); }, confirm:function(msg,fn){ //fn為回撥函式，引數和show方法的一致 this.show({buttons:{yes:'確認',no:'取消'},msg:msg,title:'提示',fn:fn}); }, prompt:function(labelWord,defaultValue,txtId,fn){ if(!labelWord)labelWord='請輸入：'; if(!defaultValue)defaultValue=""; if(!txtId)txtId="msg_txtInput"; this.show({title:'輸入提示',msg:labelWord+'<input type="text" id="'+txtId+'" style="width:200px" value="'+defaultValue+'"/>',buttons:{yes:'確認',no:'取消'},fn:fn}); }, wait:function(msg,title){ if(!msg)msg='正在處理..'; this.show({title:title,msg:msg,wait:true}); }, show:function(cfg){ //cfg:{title:'',msg:'',wait:true,icon:'預設為資訊',buttons:{yes:'',no:''},fn:function(btn){回撥函式,btn為點選的按鈕，可以為yes，no},width:顯示層的寬} //如果是等待則wait後面的配置不需要了。。 if(!cfg)throw("沒有指定配置檔案！"); //新增窗體大小改變監聽 if(Showbo.IsIE)window.attachEvent("onresize",this.onResize); else window.addEventListener("resize",this.onResize,false); if(!this.IsInit)this.InitMsg();//初始化dom物件 else this.checkDOMLast();//檢查是否在最後 //檢查是否要指定寬，預設為300 if(cfg.width)this.defaultWidth=cfg.width; this.dvMsgBox.style.width=this.defaultWidth+'px'; //可以直接使用show方法停止為進度條的視窗 if(this.timer){clearInterval(this.timer);this.timer=null;} this.dvTitle.innerHTML=''; if(cfg.title)this.dvTitle.innerHTML=cfg.title; this.dvCT.innerHTML=''; if(cfg.wait){ if(cfg.msg)this.dvCT.innerHTML=cfg.msg; this.dvCT.innerHTML+='<div class="pro"><div class="bg" id="dvProcessbar"></div></div>'; this.dvBtns.innerHTML=''; this.dvBottom.style.height='10px'; this.timer=setInterval(function(){Showbo.Msg.moveProcessbar();},1000); } else{ //if(!cfg.icon)cfg.icon=Showbo.Msg.INFO; if(!cfg.buttons||(!cfg.buttons.yes&&!cfg.buttons.no)){ cfg.buttons={yes:'確定'}; } if(cfg.icon)this.dvCT.innerHTML='<div class="icon '+cfg.icon+'"></div>'; if(cfg.msg)this.dvCT.innerHTML+=cfg.msg+'<div class="clear"></div>'; this.dvBottom.style.height='45px'; this.dvBtns.innerHTML='<div class="height"></div>'; if(cfg.buttons.yes){ this.dvBtns.appendChild(this.createBtn('yes',cfg.buttons.yes,cfg.fn)); if(cfg.buttons.no)this.dvBtns.appendChild(document.createTextNode(' ')); } if(cfg.buttons.no)this.dvBtns.appendChild(this.createBtn('no',cfg.buttons.no,cfg.fn)); } Showbo.initBodyScale(); this.dvMsgBox.style.display='block'; this.lightBox.style.display='block'; this.onResize(false); }, hide:function(){ this.dvMsgBox.style.display='none'; this.lightBox.style.display='none'; if(this.timer){clearInterval(this.timer);this.timer=null;} if(Showbo.IsIE)window.detachEvent('onresize',this.onResize); else window.removeEventListener('resize',this.onResize,false); }, onResize:function(isResize){ if(isResize)Showbo.initBodyScale(); Showbo.Msg.lightBox.style.width=Showbo.BodyScale.tx+'px'; Showbo.Msg.lightBox.style.height=Showbo.BodyScale.ty+'px'; Showbo.Msg.dvMsgBox.style.top=240+'px'; Showbo.Msg.dvMsgBox.style.left=Math.floor((Showbo.BodyScale.x-Showbo.Msg.dvMsgBox.offsetWidth)/2)+'px'; } }
css程式碼：
/* CSS Document */ body,h1,h2,h3,h4,h5,h6,p,ul,ol,li,form,img,dl,dt,dd,table,th,td,blockquote,fieldset,div,strong,label,em{margin:0;padding:0;border:0;} ul,ol,li{list-style:none;} input,button{margin:0;font-size:12px;vertical-align:middle;} body{font-size:12px;font-family:Arial, Helvetica, sans-serif; color:#333; margin:0 auto; } table{border-collapse:collapse;border-spacing:0;} a{color:#333;text-decoration:none;} a:hover{color:#c00; text-decoration:underline;} .box-163css{ width:350px; margin:220px auto; position:relative;} .box-163css input{ margin-left:10px; border:none; border:1px solid #a10000; background:#c00; text-align:center; height:24px; line-height:20px; color:#fff; cursor:pointer;} #dvMsgBox{display:none;position:absolute;font-size:12px;width:300px;overflow:hidden;z-index:999; border-radius:3px; font-family:微軟雅黑;} #dvMsgBox .top{height:40px; background-color:#72D1FF;padding-left:16px; float:left; width:100%;} #dvMsgBox .top .right{height:100%;padding-right:6px;} #dvMsgBox .top .right .title{height:100%;line-height:40px;color:#fff;vertical-align:middle;font-size:14px;overflow:hidden;} #dvMsgBox .body{background:#fff;padding-left:10px;} #dvMsgBox .body .right{background:#fff;padding-right:2px;} #dvMsgBox .body .right .ct{ line-height: 60px; vertical-align: middle; width: 100%; text-align: center; color:#2b9bc5; font-size: 14px;} #dvMsgBox .body .right .ct .pro{width:280px;border:solid 1px #6593cf;height:25px;background:#ffffff;line-height:23px;overflow:hidden;} #dvMsgBox .body .right .ct .pro .bg{width:0%;height:100%;background:#c9dffc;} #dvMsgBox .bottom{background:#fff;padding-left:6px;} #dvMsgBox .bottom .right{height:100%;/*background:transparent url(right-corners.png) no-repeat right bottom;*/padding-right:6px;} input.btn{width:56px; border-radius: 3px; font-family:微軟雅黑; cursor:pointer; color:#fff; border:none; height:25px; text-align:center; background-color:#72D1FF;text-align:center; margin:0px auto;} input.btnfocus{ background-color:#EC6D51; font-family:微軟雅黑; border-radius: 3px;width:56px;margin:0px auto; border:none; height:25px; cursor:pointer; color:#fff;} #dvMsgBox .icon{width:32px;height:32px;float:left;margin-right:10px;} #dvMsgBox .error{background:url(icon-error.gif) no-repeat;} #dvMsgBox .info{background:url(icon-info.gif) no-repeat;} #dvMsgBox .warning{background:url(icon-warning.gif) no-repeat;} #dvMsgBox .clear{clear:both;} #dvMsgBox .height{height:10px;line-height:10px;} #ShowBolightBox{display:none;-moz-opacity:0.5;filter:alpha(opacity=50);opacity:0.5;background-color:#000000;z-index:100;position:absolute;left:0px;top:0px;} #dvMsgBtns{ text-align:center; width:100%;}
以上是本人測試過，還可以的彈窗方式。