Js-Alert彈出框幾種樣式（一級）
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
~~~~~~~~~~~~~~~~~~~~~~~~~~~js-alert彈出框樣式第一種~~~~~~~~~~~~~~~~~~
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
推薦地址：https://www.cnblogs.com/yuanxiaojian/p/6293784.html，以下內容為拿出來的部分，方便大家使用。
1.建立一個css檔案，我的為alert.css,把下面內容拿過去
.win { display: none; }
.mask-layer { position: fixed; width: 100%; height: 100%; opacity: 0.5; filter: alpha(opacity=50); background-color: black; z-index: 99998; top: 0px; left: 0px; }
.window-panel { position: fixed; z-index: 99999; top: 50%; left: 50%; background-color: white; border-radius: 4px;}
.window-panel .title-panel { position: absolute; height: 36px; width: 100%; border-radius: 4px 4px 0 0; }
.window-panel .title { position: absolute; height: 36px; width: 100%; text-align: center; border-radius: 4px 4px 0 0; line-height: 36px; vertical-align: middle; background-color: whitesmoke; /*標題背景色*/ border-bottom: 1px solid rgb(233, 233, 233); z-index: 1; }
.window-panel h3 { font-size: 16px; margin: 0; }
.window-panel .close-btn { display: block; text-align: center; vertical-align: middle; position: absolute; width: 36px; height: 36px; line-height: 36px; right: 0px; text-decoration: none; font-size: 24px; color: black; background-color: #DBDBDB; border-radius: 2px; z-index: 1; }
.window-panel .close-btn:hover { background-color: #ccc; }
.window-panel .body-panel { position: absolute; width: 100%; top: 36px; border-radius: 0 0 4px 4px; z-index: 1;background: #fff;background-image: url(../images/wenli.png); }
.window-panel .body-panel.toast-panel{ position: absolute;color:#fff;background:rgba(0,0,0,0.3); }
.window-panel .content, .window-panel .btns { text-align: center; }
.window-panel .content { padding: 10px 10px 0px 10px; font-size: 16px; min-height: 40px; line-height: 22px; }
.window-panel .content.toast-content{padding:0;min-height:0;}
.window-panel .w-btn { display: inline-block; width: 60px; height: 26px; line-height: 26px; background-color: #DE5923; color: white; cursor: pointer; text-align: center; border-radius: 2px; text-decoration: none; margin: 0 10px 0px 10px; border: none; }
.window-panel .w-btn:hover { background-color: #DA3E00; }
.window-panel .w-btn:focus { outline: 0 none; }
2.建立一個ui.js檔案，名字隨意，以下內容拿走
var mizhu = new function() {
// console.log("window的寬+"+$(window).width()+)
this.width = $(window).width() * 0.5;
this.height = 172;
console.log("window的寬+"+$(window).width()+this.width)
this.close = function() {
$('.win iframe').fadeOut();
$('.win').fadeOut("fast");
setTimeout(function() {
$('.win iframe').remove();
$('.win').remove();
}, 200);
};
this.open = function(width, height, title, url, closed) {
this._close = function() {
this.close();
if($.isFunction(closed)) closed();
};
var html = '<div class="win"><div class="mask-layer"></div><div class="window-panel"><iframe class="title-panel" frameborder="0" marginheight="0" marginwidth="0" scrolling="no"></iframe><div class="title"><h3></h3></div><a href="javascript:void(0)" onclick="mizhu._close();" class="close-btn" title="關閉">×</a><iframe class="body-panel" frameborder="0" marginheight="0" marginwidth="0" scrolling="auto" src=""></iframe></div></div>';
var jq = $(html);
jq.find(".window-panel").height(mizhu.height).width(mizhu.width).css("margin-left", -mizhu.width / 2).css("margin-top", -mizhu.height);
jq.find(".title").find(":header").html(title);
jq.find(".body-panel").height(height - 36).attr("src", url);
jq.appendTo('body').fadeIn("fast");
$(".win .window-panel").focus();
};
function messageBox(html, title, message, type) {
var jq = $(html);
if(type == "toast") {
jq.find(".window-panel").width(message.length * 20).css("margin-left", -message.length * 20 / 2).css("margin-top", -mizhu.height / 2);
} else {
jq.find(".window-panel").width(mizhu.width).css("margin-left", -mizhu.width / 2).css("margin-top", -mizhu.height / 2 - 36);
}
if(valempty(title)) {
jq.find(".title").remove();
jq.find(".window-panel .body-panel").css("border-radius", "4px");
} else {
jq.find(".title").find(":header").html(title);
}
jq.find(".content").html(message.replace('\r\n', '<br/>'));
jq.appendTo('body').fadeIn("fast");
$(".win .w-btn:first").focus();
}
this.confirm = function(title, message, selected) {
this._close = function(flag) {
if(flag) {
$(".win").remove();
selected(flag);
} else {
this.close();
};
};
var html = '<div class="win"><div class="mask-layer"></div><div class="window-panel"><iframe class="title-panel" frameborder="0" marginheight="0" marginwidth="0" scrolling="no"></iframe><div class="title"><h3></h3></div><div class="body-panel"><p class="content"></p><p class="btns"><button class="w-btn" tabindex="1" onclick="mizhu._close(false);">取消</button><button class="w-btn" onclick="mizhu._close(true);">確定</button></p></div></div></div>';
messageBox(html, title, message);
};
this.alert = function(title, message, ico) {
var icon = "";
if(!valempty(ico)) {
icon = '<p class="btns" style="margin-bottom:-15px;"><img width="70px" height="70px" src="images/' + ico + '.png"></p>';
}
var html = '<div class="win"><div class="mask-layer"></div><div class="window-panel"><iframe class="title-panel" frameborder="0" marginheight="0" marginwidth="0" scrolling="no"></iframe><div class="title"><h3></h3></div><div class="body-panel">' + icon + '<p class="content"></p><p class="btns"><button class="w-btn" tabindex="1" onclick="mizhu.close();">確定</button></p></div></div></div>';
messageBox(html, title, message);
}
this.toast = function(message, time) {
var html = '<div class="win"><div class="window-panel"><iframe class="title-panel" frameborder="0" marginheight="0" marginwidth="0" scrolling="no"></iframe><div class="body-panel toast-panel"><p class="content toast-content"></p></div></div></div>';
messageBox(html, "", message, "toast");
setTimeout(function() {
mizhu.close();
}, time || 3000);
}
};
function valempty(str) {
if(str == "null" || str == null || str == "" || str == "undefined" || str == undefined || str == 0) {
return true;
} else {
return false;
}
}
3.引入這兩個檔案，就ok了
使用方法：mizhu.alert('alert_帶標題', '這是alert效果');
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
~~~~~~~~~~~~~~~~~~~~~~~~~~~js-alert彈出框樣式第二種（樣式美觀些）~~~~~~
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
網址：http://sc.chinaz.com/jiaobendemo.aspx?downloadid=2201595905905
1.建立一個css檔案，複製貼上以下內容
.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%;}
#dvMsgBtns .btn{line-height: 10px;}
2.建立一個showBo.js檔案，複製貼上以下內容
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:500,
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';
}
}
3.引入這兩個檔案，使用方法：Showbo.Msg.alert('您好，請先註冊或登入!')
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
~~~~~~~~~~~~~~~~~~~~~~~~~~~js-alert(layui中的layer彈層元件寫法）~~~~~~~~~
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
網址：https://www.layui.com/doc/modules/layer.html