参考别人的，自己改写了下，很好用。

<!DOCTYPE html>

<html lang="zh-CN">

  <head>

    <meta charset="utf-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->

    <title>Bootstrap 101 Template</title>

    <!-- Bootstrap -->

    <!-- <link href="styles/bootstrap/bootstrap.min.css" rel="stylesheet"> -->

<link rel="stylesheet" href="//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css">

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->

    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->

    <!--[if lt IE 9]>

      <script src="//cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>

      <script src="//cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>

    <![endif]-->

    <style>

      *{

        margin:0;padding:0;

        -webkit-touch-callout: none; /* prevent callout to copy image, etc when tap to hold */

        -webkit-text-size-adjust: none; /* prevent webkit from resizing text to fit */

        -webkit-tap-highlight-color: rgba(210,210,210,0.35); /* make transparent link selection, adjust last value opacity 0 to 1.0 */

        -webkit-user-select: none; /* prevent copy paste, to allow, change 'none' to 'text' */

      }

      body{

        font-family:"微软雅黑";

        font-size:12px;

      }

      ul,li{

        list-style:none;

      }

      .toast-content{

        z-index:1003;

        font-size: 1.37em;

        position: fixed;

        bottom:50%;

        width: 100%;

        opacity:0;

        height: 24px;

        display: none;

        transition: opacity 1s ease-out;

      }

      .huati_btn{

        width:175px;

        height:32px;

        background:#34a0f0;

        border-radius:3px;

        font:14px/32px "微软雅黑";

        display:block;

        overflow:hidden;

        margin:0 auto;

        text-align:center;

        color:#fff;

        text-decoration:none;

      }

      .huati{height:40px;

        padding-top:9px;

        border-bottom:1px dashed #cecece

      }

    </style>

  </head>

  <body>

    <p class="huati"><a href="#" id='huati_btu' class="huati_btn">测试一下</a></p>

    <div id="toast-content" class="toast-content" style="display: none; opacity: 0;"></div>

    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->

    <script src="js/jquery/jquery-2.1.4.min.js"></script>

    <!-- Include all compiled plugins (below), or include individual files as needed -->

    <script src="js/bootstrap/bootstrap-3.3.5.min.js"></script>

    <script src="js/zepto/zepto.min.js"></script>

    <script>

      Zepto(function($){

        var toast_time = null;

        var display_time = null;

        function startToast(html){

          if(toast_time!=null){

            clearTimeout(toast_time);

            clearTimeout(dispaly_time);

          }

          $('#toast-content').css('display', 'block');

          $('#toast-content').css('opacity', 1);

          $('#toast-content').html(html);

          toast_time = setTimeout(function(){

            $('#toast-content').css('opacity', 0);

            display_time = setTimeout(function(){

              $('#toast-content').css('display', 0);

            }, 2000)

          }, 1000);

        }

        function test(){

          startToast('<div style="color:#fff;background: rgba(0, 0, 0, 0.6);border-radius: 2px;padding: 2px;text-align: center;width:175px;margin: 0 auto;">话题征集内容不能为空</div>');

        }

        test();

      })

    </script>

  </body>

</html>

toast js的更多相关文章

  1. JS仿Android Toast提示效果

    注:这个需要jquery文件来提示支持,所以需要先调用Jquery. <script type="text/javascript" src="js/jquery.j ...

  2. 原生JS封装 toast 弹层，自动关闭

    由于公司业务需求,要一个公共toast ,下面是自己封装的一个. css: .toast { text-align: center; min-height: 70px; width: 220px; c ...

  3. js 简单弹框toast

    新建toast.js文件 function Toast(msg,duration){ duration=isNaN(duration)?3000:duration; var m = document. ...

  4. JS与APP原生控件交互

    "热更新"."热部署"相信对于混合式开发的童鞋一定不陌生,那么APP怎么避免每次升级都要在APP应用商店发布呢?这里就用到了混合式开发的概念,对于电商网站尤其显 ...

  5. Vue.js 插件开发详解

    前言 随着 Vue.js 越来越火,Vue.js 的相关插件也在不断的被贡献出来,数不胜数.比如官方推荐的 vue-router.vuex 等,都是非常优秀的插件.但是我们更多的人还只停留在使用的阶段 ...

  6. jquery表单提交获取数据(带toast dialog)

    最近写了一个召集令,传统表单提交注册.写写遇到的费时间的点与解决办法 git项目地址:form-demo(针对于手机版,懒人可以直接使用,有排版和样式) demo使用Jquery,toast使用jqu ...

  7. js 自定义类Android吐司提示框

    (function(){     var mouseX = 0;     var mouseY = 0;     //定义一个全局toaslist用来存在新建的吐司     var toastLsit ...

  8. VUE组件 之 Toast (Vue.extend 方式)

    一.效果图 二.说明 这类提示框组件我们通常都会直接在 JS 代码中进行调用.像下面这样: this.$toast('别点啦,到头啦!') 但看到网上大多数还是通过 component  方式实现的, ...

  9. VUE中toast的使用与开发

    在这篇文章中介绍了toast是什么,这篇文章主要介绍toast的开发与使用. 开发 Vuejs很流行,并且官方也给出了路由插件vue-router.数据管理插件vuex,但是我们仅仅停留在了使用的阶段 ...

随机推荐

  1. java中的内存模型

    概述 Java平台自动集成了线程以及多处理器技术,这种集成程度比Java以前诞生的计算机语言要厉害很多,该语言针对多种异构平台的平台独立性而使用的多线程技术支持也是具有开拓性的一面,有时候在开发Jav ...

  2. Null value was assigned to a property of primitive type setter of cn.itcast.oa.domain.Forum.topicCount

    [引用http://m.blog.csdn.net/blog/u013998070/41087351] Null value was assigned to a property of primiti ...

  3. random库的常见用法

    import random print( random.randint(1,10) ) # 产生 1 到 10 的一个整数型随机数 print( random.random() ) # 产生 0 到 ...

  4. Microsoft translater

    professional  tranlater tool : https://translator.microsoft.com/neural/

  5. crud树型结构数据

    小型数据,比如标签,部门之类的,可以组织数据,成层状结构,一并返回前端,节省请求次数:但是大型数据,比如省市区等等联动,如果一并返回组织好的数据,查询量大,页面多次刷新,恶意请求,放入缓存还可以,其实 ...

  6. List<T>中，Remove和RemoveAt区别

    Remove删除的是匹配的第一项.比如你的list里面有2个相同的项.那么就删除第一个.后面的不删除,找不到元素和删除失败都返回falseRemoveAt是删除索引下的项

  7. Mysql命令drop database：删除数据库

    drop命令用于删除数据库. drop命令格式:drop database <数据库名>; 例如,删除名为 xhkdb的数据库:mysql> drop database xhkdb; ...

  8. 2018.12.19 codeforces 1092F. Tree with Maximum Cost（换根dp）

    传送门 sbsbsb树形dpdpdp题. 题意简述:给出一棵边权为1的树,允许选任意一个点vvv为根,求∑i=1ndist(i,v)∗ai\sum_{i=1}^ndist(i,v)*a_i∑i=1n​ ...

  9. 2018.10.30 NOIP模拟 有环无向图（dijkstra+巧妙建图）

    传送门 建图巧妙啊. 对于每个点的出边,我们将它们排序之后依次连边. 这样可以把O(m2)O(m^2)O(m2)的边数变成O(m)O(m)O(m)的了. 连的权值就是max(edgemax(edgem ...

  10. 查看MySQL语句变量了多少行数据

    explain MySQL语句 列如 explain SELECT * FROM 表名 WHERE id=1;