<!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. HBase Endpoint

    引言   假设HBase某张表有1000个Region,里面存储着100万行数据,现在需要统计满足某些条件的行数,普通的做法是使用Filter(过滤条件),通过HBase API将满足过滤条件的行数据 ...

  2. puppet常用调试命令

    yum快速部署puppet测试环境(C/S端) rpm -ivh  http://yum.puppetlabs.com/puppetlabs-release-el-7.noarch.rpm yum r ...

  3. Aggregating tests in suites

    我们可以将来自不同类的test组成一个test suite.在JUnit 3.8.x我们使用 static Test suite()方法,但是在JUnit4我们使用在类前面加上注释 @RunWith( ...

  4. Hbase 设计与开发实战

    Hbase 概述 大数据及 NoSQL 的前世今生 传统的关系型数据库处理方式是基于全面的 ACID 保证,遵循 SQL92 的标准表设计模式(范式)和数据类型,基于 SQL 语言的 DML 数据交互 ...

  5. Android进程机制

    以下资料摘录整理自老罗的Android之旅博客,是对老罗的博客关于Android底层原理的一个抽象的知识概括总结(如有错误欢迎指出)(侵删):http://blog.csdn.net/luosheng ...

  6. Linux UDP严重丢包问题的解决

    测试系统在Linux上的性能发现丢包率极为严重,发210000条数据,丢包达110000之巨,丢包率超过50%.同等情形下Windows上测试,仅丢几条数据.形势严峻,必须解决.考虑可能是因为协议栈B ...

  7. OD: ASLR

    ASLR,Address Space Layout Randomization,通过加载程序的时候不再使用固定的基址,从而干扰 shellcode 定位的一种保护机制,包括映像随机化.堆栈随机化.PE ...

  8. nyoj 17

    // nyoj 17        代码如上,用的是dp,总的来说就是对一个字符串 从末尾开始比较,设定一个数组,存放每个单调字串的最大长度,最后比较... //要注意的就是里面if语句对于每次字符比 ...

  9. Js实现简单的联动，无数据库版本

    <html> <head> <title></title> <script language="javascript" typ ...

  10. js动态新增组合Input标签

    var x = 1; function addlink() { var linkdiv = document.getElementById("add1_0"); if (linkd ...