toast实现顶部消息提示弹出层效果代码
代码语言:html
所属分类:弹出层
代码描述:toast实现顶部消息提示弹出层效果代码,可弹出成功、错误、警告、自定义等图标消息。
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!doctype html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/toast.css"> <style> body{background:#222;font-family:'Roboto'}.container{margin:150px auto;max-width:960px;color:#fff}.btn{background-color:#E74C3C;border:0;border-bottom:3px solid #C0392B;color:#fff;text-align:center;padding:1rem 2rem;border-radius:3px;cursor:pointer;margin-right:2rem}#carbonads a{color:#fff;text-decoration:none}#carbonads a:hover{color:#fff} </style> </head> <body> <div class="container"> <button class="btn" onclick="success();">Success</button><button class="btn" onclick="error();">Error</button><button class="btn" onclick="warning();">Warning</button><button class="btn" onclick="custom();">Custom</button></div> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/toast.js"></script> <script> function success() { init({ fade_in: 800, fade_.........完整代码请登录后点击上方下载按钮下载查看
网友评论0