容易的toast提示,确认弹窗,显示图片预览插件
简单的toast提示,确认弹窗,显示图片预览插件
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("确认按钮消息");
}
}
}