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

<!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. hdu 1757 (矩阵快速幂) 一个简单的问题 一个简单的开始

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=1757 题意不难理解,当x小于10的时候,数列f(x)=x,当x大于等于10的时候f(x) = a0 * ...

  2. gerrit管理下的git代码提交小技巧

    1.提交代码git checkout targetbranch 切换至目标分支git pull origin targetbranch 拉取目标分支最新内容git add 修改文件git commit ...

  3. 关于RNA-Seq数据去接头(Adapter)这事需要讲一讲

    关于RNA-Seq数据去接头(Adapter)这事需要讲一讲 RNA-Seq adapter barcode cutadapt 首先来了解一下三个概念: 1.adapter是一段短的序列已知的核酸链, ...

  4. Scrapy框架——CrawlSpider类爬虫案例

    Scrapy--CrawlSpider Scrapy框架中分两类爬虫,Spider类和CrawlSpider类. 此案例采用的是CrawlSpider类实现爬虫. 它是Spider的派生类,Spide ...

  5. R语言读取Hive数据表

    R通过RJDBC包连接Hive 目前Hive集群是可以通过跳板机来访问 HiveServer, 将Hive 中的批量数据读入R环境,并进行后续的模型和算法运算. 1. 登录跳板机后需要首先在Linux ...

  6. [Hbase]Hbase章２　Hbase读写过程解析

    写数据 Hbase使用memstore和storefile存储对表的更新.数据在更新时首先写入hlog和memstore,memstore中的数据是排序的,当memstore累计到一定的阀值时,就会创 ...

  7. 2019，UI设计师必备神器

      2019年将会是你全新起航的一年,相信你已经制定了很多规划,正在开启第一步的推动. 作为对UI设计师更大程度的支持,今天特意为你分享一款释放你双手的设计神器.让你可以把时间和精力投入到设计本身,这 ...

  8. left join用法

    表1: Person +-------------+---------+ | 列名 | 类型 | +-------------+---------+ | PersonId | int | | Firs ...

  9. java20（判断是否为会员）

    1.不确定数组是哪个类型是,将数据类型换成类名 2.记得将判断的参数传到方法中 3.用到类名的: 创建对象时 创建未知类型的数组时 4.创建的对象所用到的名字,体重,判断(boolean isvip ...

  10. java数组元素倒置

    package dataStructure; import java.util.Arrays; import java.util.ArrayList; public class Test1 { sta ...