<!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. 通过xslt把xml转换成html

    将内容与内容的表现分离,软件界自从成为一个行业以来一直在追求的目标. xml+xslt是典型的数据与表现分离的设计方式.当然,你可以直接转换成HTML,但是如果你要进行整体变化的时候,XML+XSLT ...

  2. Check the quota usage

    stack@ubuntu1:~/Downloads$ nova absolute-limits +--------------------+------+-------+ | Name | Used ...

  3. Reachability下载地址

    https://developer.apple.com/library/ios/samplecode/Reachability/Introduction/Intro.html

  4. Android常用ProgressDialog设置

    public static ProgressDialog initDialog(Context context) { ProgressDialog progressDialog = new Progr ...

  5. CComPtr用法

    COM接口指针很危险,因为使用过程中需要每一个使用者都要严格并且正确的AddRef和Release,一旦出现问题,就会造成对象不能被正常释放,或者对象被重复删除,造成程序崩溃.所以使用COM接口,必须 ...

  6. VS2010 使用TeeChart画图控件 - 之二 - 绘制图形（折线图，柱状图）

    1.前期准备 详细可见VS2010 使用TeeChart画图控件 - 之中的一个 控件和类的导入 1. 1 加入TeeChart控件,给控件加入变量m_TeeChart 加入TeeChart控件,右击 ...

  7. SHELL网络爬虫实例剖析--转载

    原创作品,允许转载,转载时请务必以超链接形式标明文章 原始出处 .作者信息和本声明.否则将追究法律责任.http://nolinux.blog.51cto.com/4824967/1552472 前天 ...

  8. C#切割指定区域图片操作

    使用winform制作了一个切割图片的功能,切一些固定大小的图片,比如头像.界面如图: 打开本地图片 OpenFileDialog opdialog = new OpenFileDialog(); o ...

  9. Linux内核启动分析

    张超<Linux内核分析>MOOC课程http://mooc.study.163.com/course/USTC-1000029000 我的代码可见https://www.shiyanlo ...

  10. 反编译 APKTool 逆向助手

    最佳实践--Android逆向助手 1.点击"反编译apk,完成后res下的所有资源就都可以正常使用了,相当于apktool的功能------目前已失效,但是直接用rar解压是可以的!2.点 ...