snackbar实现消息通知弹出效果代码-html代码-BFW代码库

snackbar实现消息通知弹出效果代码

代码语言：html

所属分类：弹出层

代码描述：snackbar实现消息通知弹出效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!doctype html>

<html lang="en">

<head>
    <meta charset="utf-8">

   
    <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/snackbar.css">
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/snackbar.js"></script>
    <style>
        body {
            font-family: 'Roboto', Tahoma, Geneva, Verdana, sans-serif;
            background-color: #f7f7f7;
        }

        .field {
            display: inline-block;
            margin-bottom: 3px;
        }
    </style>

</head>

<body>
    <h1>js消息通知插件snackbar</h1>
     
    <div>
        <h2>颜色</h2>
        <button type="button" onclick="def();">默认</button>
        <button type="button" onclick="success();">成功</button>
        <button type="button" onclick="demoError();">错误</button>
        <button type="button" onclick="demoWarning();">警告</button>
        <button type="button" onclick="demoInfo();">信息</button>
    </div>

    <div>
        <h2>设置</h2>
        <button type="button" onclick="demoTimeout();">超时时间</button>
        <button type="button" onclick="demoNoTimeout();">不超时</button>
        <button type="button" onclick="demoNoDissmiss();">自动消失</button>
    </div>

    <div>
        <h2>自定义</h2>

        <form>
            <div class="field">
                <label>消息内容</label>
                <input id=demo_text type=text value="你好，bootstrapMB.com!" />
            </div>
            <br />

            <div class="field">
                <label for=demo_dismiss><input type=checkbox id=demo_dismiss name=demo_dismiss checked />Dissimissible</label>

            </div>
            <br />

            <div class="field">
                <label>状态</label>
                <select id="demo_status">
                    <option value="" selected>默认</option>
                    <option value=error>错误</option>
                    <option value=success>成功</option>
                    <option value=warning>警告</option>
                    <option value=info>信息</option>
                </select>
            </div>
            <br />

            <div class="field">
                <label>超时</label>
 .........完整代码请登录后点击上方下载按钮下载查看