JS
/** * team777 dialog plugins * author eric * created 2016.1.21 **/ (function(win){ 'use strict'; var Team777Dialog={ /** * demo : toast("上传成功!"); toast({close:false,closeTime:1000}); **/ curSelector:"", toast:function(){// var options={ close:true,//是否自动关闭窗口 true为自动 false为不自动手动关闭 closeTime:1000,//自动关闭窗口时间 默认1000ms 关闭 msg:"toast消息提示窗!", //消息提示消息 css:{"background":"#000",color:"#fff",width:"auto"}, callback:function(){ if(console){ console.log("消息提示消息"); } } } var args=arguments; if(args.length>0){ if(typeof(args[0])==="string"){ options["msg"]=args[0]; }else if(isJson(args[0])){ if(args[0]){ for(var i in args[0]){ options[i]=args[0][i]; } } } } showToast(options); }, //关闭toast closeToast:function(){ var options={}; if(arguments.length>0){ options=arguments[0]; } hideToast(options); }, //关闭confirm closeConfirm:function(){ var options={}; if(arguments.length<1){ options=arguments[0]; } hideConfirm(options); }, /** * 显示确认 */ confirm:function(){ var options={ title:"确认窗口",//窗口标题 msg:"config消息提示窗!", //消息提示消息 close:false,//默认不显示关闭 ok:true,//是否显示OK按钮 okTxt:"Ok",//oK按钮文字 cancel:true,//是否显示取消按钮 cancelTxt:"Cancel",//取消按钮文字 cancelCall:function(){ if(console){ console.log("取消按钮消息"); } }, okCall:function(){ if(console){ console.log("确认按钮消息"); } } } var args=arguments; if(args.length>0){ if(typeof(args[0])==="string"){ options["msg"]=args[0]; }else if(isJson(args[0])){ if(args[0]){ for(var i in args[0]){ options[i]=args[0][i]; } } } } showConfirm(options); }, imgPreview:function(options){ showImgPreview(options); }, closeImgPreview:function(){ var options={}; if(arguments.length<1){ options=arguments[0]; } closePreview(options); } }; /** 判断是否为json对象 */ function isJson(obj){ var isjson = typeof(obj) == "object" && Object.prototype.toString.call(obj).toLowerCase() == "[object object]" && !obj.length; return isjson; } /** * 显示图片预览 */ function showImgPreview(options){ showCover(); // var sc=$("body").scrollTop(); Team777Dialog.curSelector=".art-img-preview"; $(".art-img-prev").off("click"); $(".art-img-next").off("click"); if($(".art-img-preview").length>0){ var htmlArr=[]; var imgs=options.imgs; if(imgs){ var len=imgs.length; for(var i=0;i<len;i++){ htmlArr.push('<li><img src="'+imgs[i]+'" alt=""></li>'); } } $("#slider").html(htmlArr.join("")); $(".art-img-preview").show(); }else{ var htmlArr=['<div class="art-img-preview">']; htmlArr.push('<div class="art-img-head">'); htmlArr.push('<h3></h3>'); htmlArr.push('<i class="ico-del">×</i>'); htmlArr.push('</div>'); htmlArr.push('<div class="art-img-body" id="sliderContainer">'); htmlArr.push('<div class="art-img-prev"><</div>'); htmlArr.push('<div class="art-img-slider-box slider-box">'); htmlArr.push('<ul class="art-img-slider" id="slider">'); var imgs=options.imgs; if(imgs){ var len=imgs.length; for(var i=0;i<len;i++){ htmlArr.push('<li><img src="'+imgs[i]+'" alt=""></li>'); } } htmlArr.push('</ul>'); htmlArr.push('</div>'); htmlArr.push('<div class="art-img-next">></div>'); htmlArr.push('</div>'); htmlArr.push('</div>'); // htmlArr.push('<h3>'+options.msg+'</h3>'); $("body").append(htmlArr.join("")); $(".art-img-preview").on("click",".ico-del",function(){ if(options.cancelCall){ options.cancelCall(); } closePreview(options); }); } // $(".art-img-preview").css("marginTop",sc); if(options.callback){ options.callback(); } var width=$(".art-img-preview").outerWidth(),height=$(".art-img-preview").outerHeight(); // console.log("art-img-preview---width="+width+",height="+height); $(".art-img-preview").css({"marginTop":-height/2,"marginLeft":-width/2}); } function closePreview(options){ if(!options){ options={}; } $(".art-img-preview").fadeOut(); if(!options.cover){ hideCover(); } } /** * 显示toast */ function showToast(options){ Team777Dialog.curSelector=".art-toast"; showCover(); // var sc=$("body").scrollTop(); $(".art-toast").off("click",".ico-del"); if($(".art-toast").length>0){ $(".toa-body h3").html(options.msg); if(options.close){ //存在删除按钮则隐藏 if($(".art-toast .ico-del").length>0){ $(".art-toast .ico-del").hide(); } //自动关闭 setTimeout(function(){ hideToast(options); },options.closeTime); }else{ //不存在删除则创建出来 if($(".art-toast .ico-del").length<1){ $(".toa-body").append('<i class="ico-del">×</i>'); }else{ //若需要主动关闭 存在就显示出来 $(".art-toast .ico-del").show(); } $(".art-toast").on("click",".ico-del",function(){ hideToast(options); }); } $(".art-toast").show(); }else{ var htmlArr=['<div class="art-toast">']; htmlArr.push('<div class="toa-body">'); htmlArr.push('<h3>'+options.msg+'</h3>'); // htmlArr.push('<i class="ico-del">×</i>'); htmlArr.push('</div></div>'); $("body").append(htmlArr.join("")); if(options.close){ setTimeout(function(){ hideToast(options); },options.closeTime); }else{ $(".toa-body").append('<i class="ico-del">×</i>'); $(".art-toast").on("click",".ico-del",function(){ hideToast(options); }); } } if(options.icoCss){ $(".art-toast .ico-del").css(options.icoCss); }else{ $(".art-toast .ico-del").removeAttr("style"); } if(options.dialogCss){ $(".art-toast").css(options.dialogCss); }else{ $(".art-toast").removeAttr("style"); } if(options.bodyCss){ $(".art-toast h3").css(options.bodyCss); }else{ $(".art-toast h3").removeAttr("style"); } var width=$(".art-toast").outerWidth(),height=$(".art-toast").outerHeight(); // console.log("art-toast---width="+width+",height="+height); $(".art-toast").css({"marginTop":-height/2,"marginLeft":-width/2}); // $(".art-toast").css("marginTop",sc); // return html; } //关闭toast function hideToast(options){ if(!options){ options={}; } if(!options.cover){ hideCover(); } $(".art-toast").fadeOut(); if(options.callback){ options.callback(); } } //关闭背景 function showCover(){ if($(".art-bg-cover").length>0){ $(".art-bg-cover").fadeIn(); }else{ var htmlArr=['<div class="art-bg-cover"></div>']; $("body").append(htmlArr.join("")); $(".art-bg-cover").on("click",function(){ hideCover(); }); } $("body").css({"overflow":"hidden"}); } // 显示背景 function hideCover(){ $(".art-bg-cover").fadeOut(); $("body").css({"overflow":"auto"}); if(Team777Dialog.curSelector){ $(Team777Dialog.curSelector).fadeOut(); } } //显示确认弹窗 function showConfirm(options){ showCover(); Team777Dialog.curSelector=".art-dialog"; // var sc=$("body").scrollTop(); $(".art-dialog").off("click",".btn-ok"); $(".art-dialog").off("click",".btn-cancel"); if($(".art-dialog").length>0){ if(options.title){ if($(".dia-head").length>0){ $(".dia-head h3").html(options.title); }else{ $(".dia-body").before('<div class="dia-head"><h3>'+options.title+'</h3></div>'); } }else{ $(".dia-head").remove(); } if($(".art-dialog .ico-del").length<1){ $(".art-dialog .dia-head").append('<i class="ico-del">×</i>'); }else{ //若需要主动关闭 存在就显示出来 $(".art-dialog .ico-del").show(); } $(".dia-body").html(options.msg); $(".art-dialog").on("click",".ico-del",function(){ hideConfirm(options); }); if($(".dia-foot .btn-cancel").length>0){ if(options.cancel){//存在cancel按钮 $(".dia-foot .btn-cancel").html(options.cancelTxt).show(); }else{ $(".dia-foot .btn-cancel").hide(); } }else{ if(options.cancel){ $(".dia-foot").append('<button class="btn-cancel" type="button">'+options.cancelTxt+'</button>'); } } $(".art-dialog").on("click",".btn-cancel",function(){ hideConfirm(options); options.cancelCall(); }); if($(".dia-foot .btn-ok").length>0){ if(options.ok){//存在cancel按钮 $(".dia-foot .btn-ok").html(options.okTxt).show(); }else{ $(".dia-foot .btn-ok").hide(); } }else{ if(options.ok){ $(".dia-foot").append('<button class="btn-ok" type="button">'+options.okTxt+'</button>'); } } $(".art-dialog").on("click",".btn-ok",function(){ hideConfirm(options); options.okCall(); }); $(".art-dialog").show(); }else{ var htmlArr=['<div class="art-dialog">'] if(options.title){ htmlArr.push('<div class="dia-head">'); htmlArr.push('<h3>'+options.title+'</h3>'); if(options.close){ htmlArr.push('<i class="ico-del">×</i>'); } htmlArr.push('</div>'); } htmlArr.push('<div class="dia-body">'); htmlArr.push(options.msg); htmlArr.push('</div>'); htmlArr.push('<div class="dia-foot">'); htmlArr.push('</div>'); htmlArr.push('</div>'); $("body").append(htmlArr.join("")); if(options.cancel){//存在cancel按钮 $(".dia-foot").append('<button class="btn-cancel" type="button">'+options.cancelTxt+'</button>'); $(".art-dialog").on("click",".btn-cancel",function(){ hideConfirm(options); options.cancelCall(); }); } if(options.close){ $(".art-dialog").on("click",".ico-del",function(){ hideConfirm(options); }); } if(options.ok){//存在ok按钮 $(".dia-foot").append('<button class="btn-ok" type="button">'+options.okTxt+'</button>'); $(".art-dialog").on("click",".btn-ok",function(){ hideConfirm(options); options.okCall(); }); } } var css={}; if(options.css){ for(var i in options.css){ if(i=="height"){ height=options.css[i]; css[i]=options.css[i]; }else if(i=="width"&&options.css[i]==true){ css[i]=$(window).width()*0.7; }else{ css[i]=options.css[i]; } } }else{ $(".art-dialog").removeAttr("style"); } // css.marginTop=-height/2; // css.marginLeft=-width/2; $(".art-dialog").css(css); var width=$(".art-dialog").outerWidth(),height=$(".art-dialog").outerHeight(); // console.log("art-dialog,width="+width+",height="+height+JSON.stringify(css)); if(!css.marginTop){ css.marginTop=-height/2; } css.marginLeft=-width/2; $(".art-dialog").css({"marginTop":css.marginTop,"marginLeft":css.marginLeft}); } //关闭确认弹窗 function hideConfirm(options){ if(!options){ options={}; } if(!options.cover){ hideCover(); } $(".art-dialog").fadeOut(); } win["Team777Dialog"]=Team777Dialog; })(window);
css:
/*对话框样式 start*/
.art-bg-cover{
background:rgba(255,255,255,.8);
position:fixed;
width:100%;
height:100%;
top:0;
left: 0;
filter(opacity:.8);
opacity:.8;
z-index:1051;
}
.art-dialog{
max-width:500px;
/*width:450px;*/
margin:0 auto;
z-index:1052;
position: fixed;
_position:absolute;
top:50%;
left:50%;
/*transform:translate(-50%,-50%);*/
padding:0 25px;
border-radius:10px;
box-shadow: 1px 1px 15px 1px #8888C3;
background:#fff;
/*父类修复子类放大问题 导致子类的文字 内容锯齿化*/
/*-webkit-transform:translateZ(-23px);*/
}
.art-dialog .dia-head{
position:relative;
/*height:50px;*/
/*line-height:50px;*/
}
.art-dialog .dia-head .ico-del{
position: absolute;
right: -10px;
top: 10px;
cursor: pointer;
background: #7a8da0;
border-radius: 10px;
width: 20px;
height: 20px;
line-height: 20px;
color: #fff;
text-align: center;
}
.art-dialog .dia-head h3{
padding:20px 0;
/*text-align:center;*/
font-size: 18px;
border-bottom:1px solid #eee;
}
.art-dialog .dia-body{
padding:15px 0;
color:#808080;
font-size:14px;
}
.art-dialog .dia-body .editor-upload-btn{
padding: 10px 30px;
color: #808080;
border: 1px solid #dcdcdc;
font-size: 14px;
border-radius: 5px;
}
.art-dialog .dia-body .editor-file-txt{
padding: 8px 40px;
margin: 5px 5px 5px 10px;
}
.art-dialog .dia-foot{
text-align: center;
padding:20px 0;
}
.art-dialog .dia-foot button{
color:#808080;
padding:15px 0;
border: 1px solid #dcdcdc;
font-size: 14px;
border-radius:5px;
width:148px;
/*min-width:148px;*/
overflow:hidden;
white-space:nowrap;
text-overflow:ellipsis;
margin: 0 10px;
}
.art-toast{
max-width:500px;
margin:0 auto;
z-index:1052;
position: fixed;
_position:absolute;
top:50%;
left:50%;
/*transform:translate(-50%,-50%);*/
padding:0 25px;
border-radius:10px;
box-shadow: 1px 1px 15px 1px #8888C3;
background:#000;
text-align:center;
}
.art-toast .toa-body{
position: relative;
}
.art-toast .toa-body h3{
padding:20px 10px;
color:#fff;
font-size:14px;
}
.art-toast .toa-body .ico-del{
position: absolute;
right:-15px;
top:5px;
color:#fff;
cursor:pointer;
}
/*对话框样式 end*/
使用方式:
Team777Dialog.toast("") 或 Team777Dialog.toast(msg)
msg={
close:true,//是否自动关闭窗口 true为自动 false为不自动手动关闭
closeTime:1000,//自动关闭窗口时间 默认1000ms 关闭
msg:"toast消息提示窗!", //消息提示消息
css:{"background":"#000",color:"#fff",width:"auto"},
callback:function(){
if(console){
console.log("消息提示消息");
}
}
}
Team777Dialog.confirm(msg):
msg={
title:"确认窗口",//窗口标题
msg:"config消息提示窗!", //消息提示消息
close:false,//默认不显示关闭
ok:true,//是否显示OK按钮
okTxt:"Ok",//oK按钮文字
cancel:true,//是否显示取消按钮
cancelTxt:"Cancel",//取消按钮文字
cancelCall:function(){
if(console){
console.log("取消按钮消息");
}
},
okCall:function(){
if(console){
console.log("确认按钮消息");
}
}
}