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

<!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. fedora25的免密码rsync服务配置

      目标:实现免密同步数据: 1.安装rsync包: 2.手工添加配置文件: cat  /etc/rsyncd.conf # See rsyncd.conf man page for more opt ...

  2. git报“commiter email "root@localhost.localdomain"does not match your user account”

    首先检查账户邮箱配置是否正确,检查方法: git config --list 发现邮箱及帐号配置正确,但是git push时仍然报如题错误: 原因:git执行add.commit 时已经记录下了做了该 ...

  3. robot framework测试驱动无法定位页面元素

    robot framework错误提示: [ WARN ] Keyword 'Capture Page Screenshot' could not be run on failure: NoSuchW ...

  4. Servlet 3.0 规范（二）注解驱动和异步请求

    Servlet 3.0 规范(二)注解驱动和异步请求 在 Servlet 3.0 时支持注解启动,不再需要 web.xml 配制文件. 一.Servlet 3.0 组件 Servlet 容器的组件大致 ...

  5. R及Rstudio 的使用建议

    对于新人来说,进行R的学习时,通常会发现一般的教程都是让大家在交互环境下使用R. 但是这有一些缺点,比如在交换环境下,出现错误是难以撤销的,有的时候甚至需要重头做起.尤其是在Rstudio的交互环境下 ...

  6. Windows使用SSH Secure Shell实现免密码登录CentOS

    笔记来自:http://blog.csdn.net/jiangshouzhuang/article/details/50683049 1.在Windows上生成密钥找到Secure Shell Cli ...

  7. SpringMVC学习笔记：表单提交 参数的接收

    SpringMVC可以接收原生form表单和json格式数据 有一个名为Book的model,其中的属性如下: 字符串类型的name,数字类型的price,数组类型的cover,集合类型的author ...

  8. SparkStreaming updateStateByKey 保存记录信息

    )(_+_) ) 查看是否存在,如果存在直接获取 )) ssc.checkpoint() )) //使用updateStateByKey 来更新状态 val stateDstream = wordDs ...

  9. Windows 8 Stroe Apps 控件

    重新想象 Windows 8 Store Apps (3) - 控件之内容控件: ToolTip, Frame, AppBar, ContentControl, ContentPresenter; 容 ...

  10. canvas 实现赛车游戏

    一:创建画布 <canvas width="200" height="500" id="canvas" style="bor ...