新建toast.js文件

function Toast(msg,duration){
duration=isNaN(duration)?3000:duration;
var m = document.createElement('div');
m.innerHTML = msg;
m.style.cssText="max-width:60%;min-width: 150px;padding:0 14px;height: 40px;color: rgb(255, 255, 255);line-height: 40px;text-align: center;border-radius: 4px;position: fixed;top: 50%;left: 50%;transform: translate(-50%, -50%);z-index: 999999;background: rgba(0, 0, 0,.7);font-size: 16px;";
document.body.appendChild(m);
setTimeout(function() {
var d = 0.5;
m.style.webkitTransition = '-webkit-transform ' + d + 's ease-in, opacity ' + d + 's ease-in';
m.style.opacity = '0';
setTimeout(function() { document.body.removeChild(m) }, d * 1000);
}, duration);
}

应用:引入toast.js文件

Toast('这是一个弹框',2000)

js 简单弹框toast的更多相关文章

  1. js简单弹出层、遮罩层

    <html> <head> <title>js简单弹出层</title> <style> /*阴影边框效果*/ .box-shadow-1 ...

  2. Js仿弹框

    收藏一个简单实用的JS弹框,通过隐藏和显示div来实现,代码来自脚本之家! <html> <head> <title> LIGHTBOX EXAMPLE </ ...

  3. js实现弹框及自动关闭

    <SCRIPT LANGUAGE="javascript"> < !-- window.open (''page.html'',''newwindow'',''h ...

  4. JS 功能弹框封装

    // 功能提示弹框 function messageBox ( option ) { var html = ''; html += '<div class="message-box-h ...

  5. js创建弹框(提示框,待确认框)

    ;;} html,body{text-size-adjust:none;-webkit-text-size-adjust:none;-webkit-user-select:none;} a{color ...

  6. vue自定义弹框

    vue 全局自定义简单弹框 https://www.jianshu.com/p/1307329aa09e https://www.cnblogs.com/crazycode2/p/7907905.ht ...

  7. js简单显示和隐藏div,触发超链接,动态更改button值,setInterval()简单使用,jquery easyui弹出框简单使用 .

    js简单显示和隐藏div .<!DOCTYPE html> .<html> .<head> .<meta charset="UTF-8"& ...

  8. 制作一个简单的toast弹框

    toast弹框的作用 toast弹框顾名思义,就是为了弹出一个提示框,效果如图: 使用toast弹框可以可用户带来更好的交互体验 toast弹框的使用 Toast组件 制做出toast的样式以及出现的 ...

  9. js简单的弹出框有关闭按钮

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

随机推荐

  1. Identity Server 4 预备知识 -- OAuth 2.0 简介

    OAuth 2.0 简介 OAuth有一些定义: OAuth 2.0是一个委托协议, 它可以让那些控制资源的人允许某个应用以代表他们来访问他们控制的资源, 注意是代表这些人, 而不是假冒或模仿这些人. ...

  2. nodejs 使用 ethers创建以太坊钱包

    创建钱包创建钱包流程: 生成随机助记词 => 通过助记词创建钱包=>钱包信息和加密明文(私钥和密码加密) 导入钱包通过插件提供方法,根据助记词|keyStore|私钥,找到钱包信息(地址和 ...

  3. golang中Context的使用场景

    golang中Context的使用场景 context在Go1.7之后就进入标准库中了.它主要的用处如果用一句话来说,是在于控制goroutine的生命周期.当一个计算任务被goroutine承接了之 ...

  4. 小白都会超详细--ELK日志管理平台搭建教程

    目录 一.介绍 二.安装JDK 三.安装Elasticsearch 四.安装Logstash 五.安装Kibana 六.Kibana简单使用 系统环境:CentOS Linux release 7.4 ...

  5. 如何将Azure DevOps中的代码发布到Azure App Service中

    标题:如何将Azure DevOps中的代码发布到Azure App Service中 作者:Lamond Lu 背景 最近做了几个项目一直在用Azure DevOps和Azure App Servi ...

  6. 《前端之路》之 初识 JavaScript

    01 初识 JavaScript 作为在码农圈混迹了 四五年的老码畜来说,学习一门新的语言,就仿佛是老司机开新车一样 轻车熟路. 为什么会这么快呢? 因为各种套路啊- 任何一种计算机语言的最开始都是和 ...

  7. 100 - k8s源码分析-准备工作

    今天我们开始讲kubernetes的源码! 之前的其他开源项目还没有说完,后续会陆陆续续更新,我们把主线先放到k8s的源码上. 之前我想详细讲解每一行k8s源码,但是越看越发现一个大型开源项目如果拘泥 ...

  8. NTP服务和DNS服务(week3_day3)--技术流ken

    NTP时间服务器 作用:ntp主要是用于对计算机的时间同步管理操作. 时间是对服务器来说是很重要的,一般很多网站都需要读取服务器时间来记录相关信息,如果时间不准,则可能造成很大的影响. 部署安装NTP ...

  9. Netflix网关zuul(1.x和2.x)全解析

    zuul 是netflix开源的一个API Gateway 服务器, 本质上是一个web servlet应用. Zuul可以通过加载动态过滤机制,从而实现以下各项功能: 验证与安全保障: 识别面向各类 ...

  10. C#创建IIS站点及相应的应用程序池,支持IIS6.0+Windows Server 2003. 使用Builder设计模式

    测试项目结构: PS:IIS6UtilsBuilder, IIS7UtilsBuilder,IISUtilsBuilder以及IISDirector为Builder设计模式实现的核心代码.Progra ...