<!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. Windows 7 中未能从程序集System.ServiceModel

    Windows 7 中未能从程序集System.ServiceModel   “/”应用程序中的服务器错误.   未能从程序集“System.ServiceModel, Version=3.0.0.0 ...

  2. hdu4746:2013杭州网络赛I 莫比乌斯反演

    题意: 有5000组询问,每组询问求有多少i,j满足i∈[1,n],j∈[1,m]且gcd(i,j)的质因子数目<=p. n,m<=500000 思路: 首先预处理出每个数的质因子数目分别 ...

  3. Windows 如何在cmd命令行中查看、修改、删除与添加环境变量

    转自:http://www.cnblogs.com/saptechnique/archive/2013/02/17/2914222.html 首先明确一点: 所有的在cmd命令行下对环境变量的修改只对 ...

  4. chrome播放语音时,在chrome 控制台中报 DOMException: The play() request was interrupted by a call to pause(). 的问题.

    $(document).ready(function () { var audioElement = $( '<audio>' + ' <source src="" ...

  5. CI框架源代码阅读笔记5 基准測试 BenchMark.php

    上一篇博客(CI框架源代码阅读笔记4 引导文件CodeIgniter.php)中.我们已经看到:CI中核心流程的核心功能都是由不同的组件来完毕的.这些组件类似于一个一个单独的模块,不同的模块完毕不同的 ...

  6. Windows7 64位系统搭建Cocos2d-x 2.2.1最新版以及Android交叉编译环境（具体教程）

    原文地址:http://blog.csdn.net/sttyytw/article/details/17005263 声明:本教程在參考了下面博文,并经过自己的摸索后实际操作得出,本教程系本人原创,因 ...

  7. HDU4512：吉哥系列故事——完美队形I(LICS)

    Problem Description 吉哥这几天对队形比较感兴趣. 有一天,有n个人按顺序站在他的面前,他们的身高分别是h[1], h[2] ... h[n],吉哥希望从中挑出一些人,让这些人形成一 ...

  8. 常用PC服务器LSI阵列卡配置

    通常,我们使用的DELL/HP/IBM三家的机架式PC级服务器阵列卡是从LSI的卡OEM出来的,DELL和IBM两家的阵列卡原生程度较高,没有做太多封装,可以用原厂提供的阵列卡管理工具进行监控:而HP ...

  9. 关于apache下同IP多域名支持HTTPS和80跳转HTTPS的配置

    httpd-ssl的配置: Listen 443 NameVirtualHost *:443 AddType application/x-x509-ca-cert .crt AddType appli ...

  10. ssh注解开发

    引入需要的jar包 @Entity public class Teacher { @Id @GeneratedValue(strategy=GenerationType.IDENTITY) priva ...