轻量级消息弹框插件MyukiToast，一个不错的消息弹框（Toast）插件，支持设置通知类型、动画、字体、位置等等属性，可定制程度较高，进行适当扩展等。
使用时可以给window绑定一个实例
$(document).ready(function(){window.toastObj=$MT('#mytoast',{'type':'primary',//类型'position':'center',//位置'top':'1rem',//距离窗口顶部的距离'width':'50%','dismissible':true,//是否显示关闭按钮'animation':'heartbeat',//动画'autoHide':true,//自动隐藏'autoHideAnimation':'scale-out-center',//自动隐藏的动画'autoHideDelay':5000,//自动隐藏的延迟'fontSize':'24px',//字体大小'fontFamily':'Sans-serif'//字体});toastObj.toast("HELLOWORLD");});Myuki Toast
一个轻量美观的消息弹框插件
一个简单、美观、实例化创建的轻量级消息弹框（Toasts）插件。
向你的网站访客发送一些易于定制的消息提醒、通知等等。
简单用法
<linktype="text/css"rel="stylesheet"href="./css/myukitoast.css"/><scripttype="text/javascript"src="./js/jquery-3.6.0.min.js"></script><scripttype="text/javascript"src="./js/myukitoast.js"></script><divid="toastDemo"></div><script>document.ready(function(){//创建一个MyukiToast的实例lettoastObj=$MT("#toastDemo")/*ortoastObj=MyukiToast("#toastDemo");$MT==MyukiToast;*///调用toast方法toastObj.toast("欢迎使用MyukiToast");})</script>
高级用法
<divid="toastDemo"></div><script>document.ready(function(){//首先创建一个MyukiToast的实例lettoastObj=$MT("#toastDemo",/*selector:id|className|tag如果没有选择器，或者提供的选择器不存在，将会自动创建一个选择器添加到document中（#MyukiToast-时间戳）*/{"z_index":999,//default:9999"position":'left',/*default:centerleft|center|right,*/"width":'50%',"top":"32px","type":'danger',/*默认值:primary消息弹框的类型，包括以下几种：primary,secondary,success,danger,warning,info,light,dark*/"message":'欢迎使用MyukiToast',/*默认的消息，创建MyukiToast实例后，调用toast()方法时，如果没有提供消息，将会使用默认的消息执行下面的语句将会弹出消息："欢迎使用MyukiToast"toastObj.toast()*/"dismissible":true,/*默认值:false是否显示关闭按钮*/"animation":'heartbeat',/*默认值:noanimation消息弹框的动画heartbeat,normal-shake,jello-horizontal,wobble-hor-bottom,vibrate-1,noanimation你也可是自己设计css动画*/"maxExist":10,/*默认值:10document中消息弹框的最大数量（包括已经隐藏的消息弹框），如果超出最大值，将会移除超出的消息弹框*/"autoHide":true,/*默认值:true消息弹框是否自动隐藏，如果将autoHide设置为false，请务必将dismissible设置为true*/"autoHideAnimation":'originFade',/*默认值:nohideanimation消息弹框自动隐藏的动画scale-out-center,fade-out,originFade,rotate-out-center,puff-out-center,slide-out-top,nohideanimation你同样可以自己设计css动画*/"originFadeDuration":1000,/*默认值:800只对动画'originFade'有效，原生fadeOut的时长*/"autoHideDelay":5000,/*默认值:3000弹框自动隐藏的延迟时间*/});//创建完实例以后就可以调用toast方法了//简单用法toastObj.toast("欢迎使用MyukiToast");//高级用法toastObj.toast({"type":'danger',/*默认值:primary消息弹框的类型，包括以下几种：primary,secondary,success,danger,warning,info,light,dark*/"message":'欢迎使用MyukiToast',/*默认的消息，创建MyukiToast实例后，调用toast()方法时，如果没有提供消息，将会使用默认的消息执行下面的语句将会弹出消息："欢迎使用MyukiToast"toastObj.toast()*/"dismissible":true,/*默认值:false是否显示关闭按钮*/"fade":true,/*默认值:true消息自动隐藏时，是否使用fadeOut的效果*/"fadeDelay":1000,/*默认值:800fadeOut的时长*/"autoHide":true,/*默认值:true消息弹框是否自动隐藏，如果将autoHide设置为false，请务必将dismissible设置为true*/"autoHideDelay":5000,/*default:3000自动隐藏的时长*/"color":'#666',"fontSize":'16px',"fontFamily":'sans-serif'});})</script>
产品猿社区致力收录更多优质的商业产品，给服务商以及软件采购客户提供更多优质的软件产品，帮助开发者变现来实现多方共赢；
日常运营的过程中我们难免会遇到各种版权纠纷等问题，如果您在社区内发现有您的产品未经您授权而被用户提供下载或使用，您可按照我们投诉流程处理，点我投诉；
本文来自用户发布投稿，不代表产品猿立场 ；若对此文有疑问或内容有严重错误，可联系平台客服反馈；
部分产品是用户投稿，可能本文没有提供官方下下载地址或教程，若您看到的内容没有下载入口，您可以在我们产品园商城搜索看开发者是否有发布商品；若您是开发者，也诚邀您入驻商城平台发布的产品，地址：点我进入；
如若转载，请注明出处：https://www.chanpinyuan.cn/35011.html；
