<!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. 源代码管理工具TFS2013安装与使用

    最近公司新开发一个项目要用微软的TFS2013进行项目的源代码管理,以前只是用过SVN,从来没有用过TFS,所以在网上百度.谷歌了好一阵子来查看怎么安装和配置,还好花了一天时间总算是初步的搞定了,下面 ...

  2. HDU2056(rectangles)

    Rectangles Time Limit: 1000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others) Total ...

  3. POJ 2718 穷举

    题意:给定一组数字,如0, 1, 2, 4, 6, 7,用这些数字组成两个数,并使这两个数之差最小.求这个最小差.在这个例子上,就是204和176,差为28. 分析:首先可以想到,这两个数必定是用各一 ...

  4. Exception testing

    怎样去验证代码是否抛出我们期望的异常呢?虽然在代码正常结束时候验证很重要,但是在异常的情况下确保代码如我们希望的运行也很重要.比如说: new ArrayList<Object>().ge ...

  5. L1签证_百度百科

    L1签证_百度百科 L1签证

  6. 使用 Make 命令构建网站

    网站开发正变得越来越专业,涉及到各种各样的工具和流程,迫切需要构建自动化. 所谓”构建自动化”,就是指使用构建工具,自动实现”从源码到网页”的开发流程.这有利于提高开发效率.改善代码质量. 本文介绍如 ...

  7. @RestController

    /* * Copyright 2002-2014 the original author or authors. * * Licensed under the Apache License, Vers ...

  8. Exception in thread "main" com.sun.xml.internal.ws.streaming.XMLStreamReaderException: unexpected XML tag.

    webservice 抛异常,原因: public class HeaderHandler implements SOAPHandler<SOAPMessageContext>{ @Ove ...

  9. awk使用入门

    1.基本用法 awk '{pattern + action}' {filenames} pattern 表示 AWK 在数据中查找的内容 action 是在找到匹配内容时所执行的一系列命令. patt ...

  10. Android Dialog AlertDialog

    1.普通的对话框 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" andro ...