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

<!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. PAT 1027 打印沙漏(20)（思路）

    1027 打印沙漏(20)(20 分) 本题要求你写个程序把给定的符号打印成沙漏的形状.例如给定17个"*",要求按下列格式打印 ***** *** * *** ***** 所谓& ...

  2. 探索未知种族之osg类生物---呼吸分解之事件循环一

    事件循环和更新循环 终于到了我们嘴里经常念叨的事件循环.更新循环以及渲染循环了.首先我们来区分一下事件循环和渲染循环,他们两个首先是两个不同顺序执行的过程,我们有时候会用到任意node的updateC ...

  3. Luogu1501 Tree II - LCT

    Code #include<cstdio> #include<cstring> #include<algorithm> #define rd read() #def ...

  4. 02. pt-archiver

    pt-archiver \--source h=192.168.100.101,P=3306,u=admin,p='admin',D=db01,t=t01 \--dest h=192.168.100. ...

  5. 脚本路径问题_dirname

    pwd可获取命令当前的路径 可是若我们想在脚本中获取脚本所在文件夹的路径,这种方法是不够用的. 例如,我们的脚本放在/home/user/script/下,名字叫做getpath.sh getpath ...

  6. 【WebService】WebService之WSDL文档深入分析（三）

    WSDL概念 WSDL(网络服务描述语言,Web Services Description Language)是一门基于 XML 的语言,用于描述 Web Services 以及如何对它们进行访问. ...

  7. java JNI 实现原理 (二) Linux 下如何 load JNILibrary

    在博客java JNI (一)虚拟机中classloader的JNILibrary 中讨论了java中的Library 是由classloader 来load的,那我们来看看 classloader是 ...

  8. 63.delegate回调 和block回调

    效果:viewController里面放置一个按钮和Lab,点击按钮进入oneViewController(delegate回调)或者BlockViewController(block回调),两者控制 ...

  9. mysql之练习题4

    准备表: create table class(cid int primary key auto_increment, caption ) not null unique); INSERT into ...

  10. 2018.10.24 NOIP模拟 小 C 的序列（链表+数论）

    传送门 考虑到a[l],gcd(a[l],a[l+1]),gcd(a[l],a[l+1],a[l+2])....gcd(a[l]...a[r])a[l],gcd(a[l],a[l+1]),gcd(a[ ...