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);},//关闭toastcloseToast:function(){var options={};if(arguments.length>0){options=arguments[0];}hideToast(options);},//关闭confirmcloseConfirm: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">&lt;</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">&gt;</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;}//关闭toastfunction 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("确认按钮消息");

}

}

}

简单的toast提示,确认弹窗,显示图片预览插件相关推荐

  1. Vue中使用el-popover实现悬浮弹窗显示图片预览

    场景 数据库中存储照片的磁盘路径,需要鼠标在el-table的路径字段上悬浮时弹窗进行 图片网络URL的预览,所以需要在悬浮后对图片路径进行磁盘路径和网络URL映射路径 的转换. 注: 博客: htt ...

  2. .md文件中插入本地图片并显示图片预览

    文章目录 前言 一.图片文件上传到gitee图片仓库 1:获取图片网址 (1).注册gitee,建立gitee图片仓库 (2)上传图片至gitee图片仓库 2.修改图片网址,插入到md文件中并预览 ( ...

  3. pc 图片预览放大 端vue_安利一款简单好用的Vue图片预览插件

    在项目中因为要经常用到图片预览效果,自己写的话麻烦死啦(懒) vue-photo-preview 一个基于 photoswipe 的 vue 图片预览插件,支持移动端和PC端,支持各种手势操作,放大缩 ...

  4. dw按钮图片滚动js_使用 React Hooks 实现仿石墨的图片预览插件（巨详细）

    点击上方"前端教程",选择"星标" 每天前端开发干货第一时间送达! 作者:DARRELL https://juejin.im/post/5e9bf299f265 ...

  5. 移动端图片预览插件-fly-zomm-img.min.js

    移动端图片预览插件,一个JQ的插件,支持手势放大缩小:有点小bug,不过感觉是可以接受的: 插件的地址:http://www.jq22.com/jquery-info15466 那里有具体的说明,但是 ...

  6. html页面点击图片名称查看图片------图片预览插件viewer.js使用

    前言 在做项目时,会遇到在前台展示附件详情,比如图片,word,pdf等.viewer.js 图片查看器,用来查看页面中的图片. 基本效果: Viewer.js的使用 这是一个github工程,功能很 ...

  7. React 图片预览插件 rc-viewer @hanyk/rc-viewer

    最近一个需求是图片要实现预览并且可以上下切换,react接触不是很久,查了好多资料,最终对@hanyk/rc-viewer下手,jquery用多了伙伴都知道viewer.js,一个很强大的图片预览插件 ...

  8. VSCode图片预览插件 Image preview

    VSCode前端开发图片预览插件 Image preview(支持css预览 支持svg格式) 一款提高前端开发效率的插件 ,代码中hover直接预览图片 先上效果图 不仅html中可以预览 js代码 ...

  9. vue3 开发一个图片预览插件

    vue3 的插件开发和vue2思路类似但是写法却迥异.主要变化在vue3没有了extend构造器. 这次我们通过一个图片预览插件,贯通整个vue3插件开发的过程. 1 在src下新建lplugins文 ...

最新文章

  1. SQL与NoSQL的区别 以MySQL与MongoDB为例
  2. R循环函数（for、while、break、next）
  3. hdu5461(2015沈阳网络赛L题)
  4. c 普通的文本变成注释文本的快捷键_IntelliJ Idea 常用快捷键列表 (2019年总结)
  5. 数据结构实验之栈一：进制转换
  6. linux iso的引导文件,Linux_从硬盘启动Desktop ISO所需的引导文件，一、仅从硬盘启动Destdop ISO 并 - phpStudy...
  7. 【程序设计】变量名的命名原则
  8. IFrame中 Forms验证超时页面跳转跳出框架 简单解决方法
  9. postgreSQL源码分析——索引的建立与使用——GIST索引（1）
  10. python解析nginx配置文件_Nginx情景分析之配置文件解析
  11. 华为OJ-整形数组合并
  12. Java项目大合集练手项目经验
  13. （一）外显子组数据分析之软件安装大全
  14. java roundup函数_Excel函数（2）if、rand、round函数
  15. catia制作物料明细_CATIA导出装配文件的部件列表BOM清单到Excel文件 | 坐倚北风
  16. 2021.02.17 GDKOI2021 好题记 第一记
  17. 9个很棒的CSS边框技巧
  18. 饥荒服务器显示队友mod,饥荒怎么显示物品给队友看 | 手游网游页游攻略大全
  19. 史上最简单的软件破解——5行脚本代码完美破解99%的过期软件
  20. 关于x86、x86-64、x64、i386、i486、i586和i686等名词的解释

热门文章

  1. element-ui的table表格数据选择，分页，跨页保存数据的方法
  2. RTOS 中采样任务的设计
  3. 软件测试大专_【编测编学】领跑计划二期，快速铸造软件测试工程师
  4. 用计算机模拟人类循环,半模拟循环计算,cyclic computation with semi-simulation,音标,读音,翻译,英文例句,英语词典...
  5. 2014年企业服务市场获得风投一览
  6. python爬取站_简单python爬虫练习 E站本爬取
  7. POJ1001 求高精度幂 （分治高精度大数相乘）
  8. 高可靠性软件测试方案探讨
  9. java基础知识之整体内容概述（二）
  10. MOOC-浙江大学-博弈论基础-学习笔记（八）