toast实现顶部消息提示弹出层效果代码-html代码-BFW代码库

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_.........完整代码请登录后点击上方下载按钮下载查看