<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<title>Document</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<script src="jquery-3.0.0.min.js"></script>
<style>
.toast-container {
position: fixed;
width: 100%;
height: 100%;
left: 100%;
top: 100%;
}

.toast {
position: absolute;
top: -50%;
left: -50%;
transform: translate(-50%, -50%);
padding: 13px 16px;
font-size: 14px;
color: #ccc;
background: rgba(37, 38, 45, 0.9);
border-radius: 2px;
width: auto;
/*可以输入的字数的宽度*/
max-width: 20em;
}
</style>
</head>

<body>
<script>
var toastcome = function(msg) {
var str = "<div class='toast-container' style='display:none'> <div class='toast'>" + msg + "</div></div>";
$('body').append(str);
$('.toast-container').stop().fadeIn(100).delay(1000).fadeOut(400); //fade out after 3 seconds
setTimeout(function() {
$('.toast-container').remove();
}, 3000);
}
// toastcome("你好，我是谁不关你的事情，清理这里是我的责任，谢谢你好，我是谁不关你的事情，清理这里是我的责任，谢谢你好，我是谁不关你的事情，清理这里是我的责任，谢谢");
toastcome("你好，我是谁");
</script>
<!-- <div class="toast-container">
<div class="toast">你好，我是谁不关你的事情，清理这里是我的责任，谢谢</div>
</div> -->
</body>

</html>

toast组件较为完美版本的更多相关文章

  1. 提示框的优化之自定义Toast组件之（二）Toast组件的业务逻辑实现

    在java下org.socrates.mydiary.activity下LoginActivity下自定义一个方法showCustomerToast()  public class LoginAct ...

  2. 微信小程序把玩（二十四）toast组件

    原文:微信小程序把玩(二十四)toast组件 toast消息提示框,可用在提示一些信息,比如清楚缓存给用户一个友好的提示!或操作一些请求不想让用户有什么操作,toast也可以做到因为toast显示时其 ...

  3. 百度小程序自定义通用toast组件

    百度小程序Toast组件 author: @TiffanysBear 百度小程序自定义通用toast组件 BdToast百度小程序自定义通用组件-github地址 需求 手百小程序的toast仅支持在 ...

  4. 查看Spark与Hadoop等其他组件的兼容版本

    安装与Spark相关的其他组件的时候,例如JDK,Hadoop,Yarn,Hive,Kafka等,要考虑到这些组件和Spark的版本兼容关系.这个对应关系可以在Spark源代码的pom.xml文件中查 ...

  5. 使用Angular CDK实现一个Service弹出Toast组件

    在Angular中,官方团队在开发Material组件库的同时,顺手做了一套Component dev kit,也就是在Angular世界中大名鼎鼎的CDK,这套工具包提供了非常多的前端开发的通用功能 ...

  6. toast组件小结

    简介:toast是"吐司"的意思,它属于android杂项组件,是一个简单的消息提示框,类似于javascript中的alert. 作用 显示文本 显示图片 显示图文 3.常用方法 ...

  7. 提示框的优化之自定义Toast组件之（三）Toast组件优化

    开发步骤: 在toast_customer.xml文件中添加一个图片组件对象显示提示图片 <?xml version="1.0" encoding="utf-8&q ...

  8. 提示框的优化之自定义Toast组件之（一）Toast组件的布局实现

    开发步骤:  在res下layout下创建一个Toast的布局资源文件toast_customer.xml  在最外层布局组件中为该布局添加android:id属性  //toast_custo ...

  9. 官方教程：Apache Kylin和Superset集成，使用开源组件，完美打造OLAP系统

    本文转自Apache Kylin公众号apachekylin. Superset 是一个数据探索和可视化平台,设计用来提供直观的,可视化的,交互式的分析体验. Superset 提供了两种分析数据源的 ...

随机推荐

  1. Selenium IDE整理

    安装 Step1: 下载Firefox浏览器 http://www.firefox.com.cn/ Step2: 安装Selenium IDE插件 http://seleniumhq.org/down ...

  2. 2015 GOOGLE I/O大会看点总结：新的开发工具及云端测试工具

        http://ask.android-studio.org/?/article/48 尽管凌晨开始的主题演讲略显晦涩并继承了谷歌一贯的东一句西一句想起啥说啥的混乱风格,但期待用技术改变世界的技 ...

  3. STK 10.1.3

    2692407267@qq.com.很多其它内容请关注http://user.qzone.qq.com/2692407267 STK 10.1.3与Qualnet联合仿真的demo

  4. Drawable 着色的后向兼容方案

    看到 Android Weekly 最新一期有一篇文章:Tinting drawables,使用 ColorFilter 手动打造了一个TintBitmapDrawable,之前也看到有些文章使用这种 ...

  5. HDU -2674 N！Again(小技巧)

    这道题有个小技巧,就是既然是n!,那么对2009求余,只要大于2009!,那么一定是0,在仔细想想会发现,根本到不了2009,只要到2009的最大质因数就行了,为什么呢?因为最大质因数是最大的一个不能 ...

  6. Java多线程——ThreadLocal类

    一.概述   ThreadLocal是什么呢?其实ThreadLocal并非是一个线程的本地实现版本,它并不是一个Thread,而是threadlocalvariable(线程局部变量).也许把它命名 ...

  7. ASP.NET-FineUI开发实践-9(四)

    现在是这么个问题,在开发中表格是动态出来的,就是标准板是全部字段列出,客户要根据情况列出自己想要的,在增加操作页面的同时要是能用前台自带的功能直接保存到后台就好了,现在的列显示和隐藏是不回发的. 1. ...

  8. MVC4数据访问EF查询linq语句的时候报错找不到表名问题

    一天做项目的时候遇到这样的问题,MVC4用EF访问数据查询用linq语句的时候报错找不到表名:报错如下图: 研究了几种情况,最后还是没有找到正真的问题所在,不过可能是和路由解析问题有关,暂时还没有进行 ...

  9. Java Criteria表关联查询（两个表未定义关联关系）

    Criteria criteria = this.getSession().createCriteria(Competition.class, "b"); DetachedCrit ...

  10. .Net使用SSH.NET通过SSH访问Linux主机

    使用了SSH.NET库,添加引用dll至项目,以下代码显示了点击按钮后SSH链接Linux主机执行命令并返回命令执行结果 protected void btnExcute_Click(object s ...