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

<!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. HTML&&css练习

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  2. Python.tornado.0

    Tornado https://github.com/facebook/tornado http://www.tornadoweb.org/en/stable/guide/intro.html  (A ...

  3. 20172306《java程序设计与数据结构》第六周学习总结

    20172306<Java程序设计>第六周学习总结 教材学习内容总结 第八章关键学习了数组的相关内容.我觉得主要分一下几点: 1.索引是从0开始,要区分好索引值和个数值.0的索引处是第一个 ...

  4. 用VS2010打开VS2012项目

    1.修改解决方案文件,即.sln文件: 用记事本打开.sln文件,把其中的 Microsoft Visual Studio Solution File, Format Version 12.00 # ...

  5. java集合示例 小心重载的陷阱

    package com.hra.riskprice; import com.hra.riskprice.SysEnum.Factor_Type; import org.springframework. ...

  6. Arithmetic Slices LT413

    A sequence of number is called arithmetic if it consists of at least three elements and if the diffe ...

  7. jmeter多用户并发

    1.需要参数化 2.单用户需要在请求头里面传入cookie

  8. 字符串匹配 - sunday算法

    常见的字符串匹配算法有BF.KMP(教科书中非常经典的).BM.Sunday算法 这里主要想介绍下性能比较好并且实现比较简单的Sunday算法 . 基本原理: 从前往后匹配,如果遇到不匹配情况判断母串 ...

  9. php实现MySQL两库对比升级版

    define('DATABASE1', 'db1'); $dbi1 = new DbMysql; $dbi1->dbh = 'mysql://root:password@127.0.0.1/'. ...

  10. 统计方形(NOIP1997)

    给链接:统计方形 这题是棋盘问题的数据加强版. 其实由于洛谷的数据比较水,所以你把我在棋盘问题题解中写的代码提交,也能AC. 但让给我们来看一个更优的解法. 先给代码: #include<bit ...