js 简单弹框toast
新建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的更多相关文章
- js简单弹出层、遮罩层
<html> <head> <title>js简单弹出层</title> <style> /*阴影边框效果*/ .box-shadow-1 ...
- Js仿弹框
收藏一个简单实用的JS弹框,通过隐藏和显示div来实现,代码来自脚本之家! <html> <head> <title> LIGHTBOX EXAMPLE </ ...
- js实现弹框及自动关闭
<SCRIPT LANGUAGE="javascript"> < !-- window.open (''page.html'',''newwindow'',''h ...
- JS 功能弹框封装
// 功能提示弹框 function messageBox ( option ) { var html = ''; html += '<div class="message-box-h ...
- js创建弹框(提示框,待确认框)
;;} html,body{text-size-adjust:none;-webkit-text-size-adjust:none;-webkit-user-select:none;} a{color ...
- vue自定义弹框
vue 全局自定义简单弹框 https://www.jianshu.com/p/1307329aa09e https://www.cnblogs.com/crazycode2/p/7907905.ht ...
- js简单显示和隐藏div,触发超链接,动态更改button值,setInterval()简单使用,jquery easyui弹出框简单使用 .
js简单显示和隐藏div .<!DOCTYPE html> .<html> .<head> .<meta charset="UTF-8"& ...
- 制作一个简单的toast弹框
toast弹框的作用 toast弹框顾名思义,就是为了弹出一个提示框,效果如图: 使用toast弹框可以可用户带来更好的交互体验 toast弹框的使用 Toast组件 制做出toast的样式以及出现的 ...
- js简单的弹出框有关闭按钮
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
随机推荐
- golang的cms
golang的cms 说说cms cms(内容管理系统)是建站利器.它的本质是为了快速建站.cms本质是一个后台服务站,使用这个后台,能很快搭建一个前台web站.在PHP的世界里面,CMS框架简直不要 ...
- vue的混合mixins学习
mixins 混合 (mixins) 是一种分发 Vue 组件中可复用功能的非常灵活的方式. 混合对象可以包含任意组件选项. 当组件使用混合对象时,所有混合对象的选项将被混入该组件本身的选 ...
- RESTful API接口文档规范小坑
希望给你3-5分钟的碎片化学习,可能是坐地铁.等公交,积少成多,水滴石穿,谢谢关注. 前后端分离的开发模式,假如使用的是基于RESTful API的七层通讯协议,在联调的时候,如何避免配合过程中出现问 ...
- [JavaScript] Cookie,localStorage,sessionStorage概述
Cookie Cookie 是一些数据, 存储于你电脑上的文本文件中,当 web 服务器向浏览器发送 web 页面时,在连接关闭后,服务端不会记录用户的信息.Cookie 的作用就是存储 web 页面 ...
- 盘点 Python 中的那些冷知识(二)
上一篇文章分享了 Python中的那些冷知识,地址在这里 盘点 Python 中的那些冷知识(一) 今天将接着分享!! 06. 默认参数最好不为可变对象 函数的参数分三种 可变参数 默认参数 关键字参 ...
- [转]Blue Prism VBO Cheat Sheet
本文转自:https://www.cheatography.com/ethanium/cheat-sheets/blue-prism-vbo/ Blue Prism MAPIEx Configure ...
- SQLServer存储过程编写规则
SQLServer编写规则 1. 存储过程 a) 在程序应用中,对于数据库“写”操作的功能通过存储过程来实现. b) 存储过程命名: SP_+表名(+功能名) 对于一个 ...
- Linux网络相关概念和修改IP地址的方法
2.1.1 网卡的命名规则 CENTOS6的网卡命名方式:它会根据情况有所改变而非唯一且固定,在CENTOS6之前,网络接口使用连续号码命名: eth0. eth1等,当增加或删除网卡时,名称可能会 ...
- 将配置文件appsetting中的值转换为动态对象调用
该文可参考我的另一篇关联文章: https://www.cnblogs.com/lxhbky/p/6957825.html 配置如下: <!--邀请用户送优惠券规则{邀请人规则:[{邀请人: ...
- SAP MM A工厂下的PR可以转成B工厂下的PO?
SAP MM A工厂下的PR可以转成B工厂下的PO? 答案是可能的,这也是SAP标准行为之一. 如下图采购申请单据, PR中的Plant是GENL.该PR 已经转成了PO,如上图. 看这个PO,工厂代 ...