原生js实现自定义alert风格和实现
2018年6月29 最新更新
添加函数节流，解决多次点击问题，添加单例模式，提高代码性能。
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<title>自定义alert</title>
<style type="text/css">
html,
body {
padding: ;
margin: ;
}
/* //防止鼠标双击选中文字
*/ div { -khtml-user-select: none;
/*早期浏览器*/
user-select: none;
}
/* //来自animated.css的样式 */ .animated {
animation-duration: 1s;
animation-fill-mode: both;
} @keyframes bounceInDown {
from,
%,
%,
%,
to {
animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
} % {
opacity: ;
transform: translate3d(, -3000px, );
} % {
opacity: ;
transform: translate3d(, 25px, );
} % {
transform: translate3d(, -10px, );
} % {
transform: translate3d(, 5px, );
} to {
transform: none;
display: none;
}
} .bounceInDown {
animation-name: bounceInDown;
} </style>
</head> <body>
<button onclick="test" id="btn">点我测试</button>
<script type="text/javascript">
(function(win, doc) {
var firstTime = true,
startTime = ; function alert(txt, autoTime, top) {
//工具函数
function $(dom) {
return document.querySelector(dom);
}
//单利模式核心
var getSingle = function(fn) {
var result;
return function() {
return (result || (result = fn.apply(this, arguments)));
}
} //函数节流
var throttle = function(fn, interval) {
var __self = fn; // 保存需要被延迟执行的函数引用// 是否是第一次调用
return function() {
var args = arguments,
__me = this;
if (firstTime) { // 如果是第一次调用，不需延迟执行
__self.apply(__me, args);
return firstTime = false;
} var endTime = new Date() * ; //时间大于3000秒下次执行
if (endTime - startTime > (autoTime || )) {
__self.apply(__me, args);
}
};
}; //创建div代码
var createDiv = function() { var div = doc.createElement("div");
div.style.backgroundColor = " #22b9ff";
div.style.color = " #fff";
div.style.position = " fixed";
div.style.zIndex = ;
div.style.height = " 60px";
div.style.top = top || "10%";
div.style.left = "50%";
div.style.lineHeight = " 60px";
div.style.borderRadius = " 4px";
div.style.fontSize = " 20px";
div.style.textAlign = "center";
div.style.padding = "0 10px";
div.className = "animated bounceInDown";
div.id = "alert";
div.innerHTML = txt || "不能为空！";
return div;
} var createSingleDiv = getSingle(createDiv); return throttle(function() { var div = createSingleDiv(); //创建div
startTime = new Date() * ; //初始位置
$("body").appendChild(div);
//动态调整位置
var alertWidth = win.getComputedStyle($("#alert"), null).width;
div.style.marginLeft = -parseInt(alertWidth) / + "px";
setTimeout(function() {
$("body").removeChild(div);
}, autoTime || );
}).apply(this, null);
} win.alert = alert; //导出 })(window, document); document.getElementById('btn').onclick = function() {
alert("手机号不能为空！");
} </script>
</body> </html>
上篇文章介绍了自定义confirm的必要性，可以说alert是比confirm更为常用的浏览器自带组件了。但更因为常用，而原生组件无论是样式还是体验都不是很好，所以更加有必要自定义。
此为改造的背景。
本来第一版是自定义的第一版是没有防止提示期间，用户进行其他操作的透明层的；js代码是这样：
<script type="text/javascript">
window.alert = function(text) { //实现alert
var div = document.createElement("div");
div.style.backgroundColor = " #22b9ff";
div.style.color = " #fff";
div.style.position = " fixed";
div.style.zIndex = 9999999;
div.style.height = " 60px";
div.style.top = " 10%";
div.style.left = "50%";
div.style.lineHeight = " 60px";
div.style.borderRadius = " 4px";
div.style.fontSize = " 20px";
div.style.textAlign = "center";
div.style.padding = "0 10px";
div.className = "animated bounceInDown";
div.id = "alert";
div.innerHTML = text;
document.getElementsByTagName("body")[0].appendChild(div);
var selfObj = document.getElementById("alert");
//动态调整位置
var alertWidth = window.getComputedStyle(selfObj, null).width;
div.style.marginLeft = -parseInt(alertWidth) / 2 + "px";
setTimeout(function() {
document.getElementsByTagName("body")[0].removeChild(div);
}, 30000);
}
alert("这是自定义的alert");
</script>
后来想到实际的alert效果，提示期间是无法做其它操作的，于是改造为这样
<script type="text/javascript">
window.alert = function(text) {
//透明遮罩层
var mask = document.createElement("div");
mask.style.position = " fixed";
mask.style.zIndex = 1000000;
mask.style.top = 0;
mask.style.bottom = 0;
mask.style.left = 0;
mask.style.right = 0;
//实现alert
var div = document.createElement("div");
div.style.backgroundColor = " #22b9ff";
div.style.color = " #fff";
div.style.position = " fixed";
div.style.zIndex = 9999999;
div.style.height = " 60px";
div.style.top = " 10%";
div.style.left = "50%";
div.style.lineHeight = " 60px";
div.style.borderRadius = " 4px";
div.style.fontSize = " 20px";
div.style.textAlign = "center";
div.style.padding = "0 10px";
div.className = "animated bounceInDown";
div.id = "alert";
div.innerHTML = text;
document.getElementsByTagName("body")[0].appendChild(div);
document.getElementsByTagName("body")[0].appendChild(mask);
var selfObj = document.getElementById("alert");
//动态调整位置
var alertWidth = window.getComputedStyle(selfObj, null).width;
div.style.marginLeft = -parseInt(alertWidth) / 2 + "px";
setTimeout(function() {
document.getElementsByTagName("body")[0].removeChild(div);
document.getElementsByTagName("body")[0].removeChild(mask);
}, 3000);
}
alert("这是自定义的alert");
</script>
值得一提的是动态位置的调整哪块，通过实时计算alert组件的宽度，保证组件始终处于中间位置，至于alert组件的显示时间，就自己改源代码时间吧。
整体代码如下
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<title>自定义alert</title>
<style type="text/css">
html,
body {
padding: ;
margin: ;
}
/* //防止鼠标双击选中文字
*/ div { -khtml-user-select: none;
/*早期浏览器*/
user-select: none;
}
/* //来自animated.css的样式 */ .animated {
animation-duration: 1s;
animation-fill-mode: both;
} @keyframes bounceInDown {
from,
%,
%,
%,
to {
animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
} % {
opacity: ;
transform: translate3d(, -3000px, );
} % {
opacity: ;
transform: translate3d(, 25px, );
} % {
transform: translate3d(, -10px, );
} % {
transform: translate3d(, 5px, );
} to {
transform: none;
}
} .bounceInDown {
animation-name: bounceInDown;
} </style>
</head> <body>
<script type="text/javascript">
(function(win,doc) {
var alert = function(text, time, top) {
text = text || "确定删除？",time = time || ,top = top || "10%";//增加默认值，增强健壮性
var body=doc.getElementsByTagName("body")[];//优化dom
//实现alert
var div = doc.createElement("div");
div.style.backgroundColor = " #22b9ff";
div.style.color = " #fff";
div.style.position = " fixed";
div.style.zIndex = ;
div.style.height = " 60px";
div.style.top = top;
div.style.left = "50%";
div.style.lineHeight = " 60px";
div.style.borderRadius = " 4px";
div.style.fontSize = " 20px";
div.style.textAlign = "center";
div.style.padding = "0 10px";
div.className = "animated bounceInDown";
div.id = "alert";
div.innerHTML = text;
body.appendChild(div);
var selfObj = doc.getElementById("alert");
//动态调整位置
var alertWidth = win.getComputedStyle(selfObj, null).width;
div.style.marginLeft = -parseInt(alertWidth) / + "px";
setTimeout(function() {
body.removeChild(div);
}, time);
}
win.alert=alert;//导出
})(window,document);
alert();
</script>
</body> </html>
2018年6月24日更新 增加参数的默认值，该少dom访问慢的问题，使用闭包包裹，alert导出覆盖window
在整体代码中，有一个用来防止双击选中文字的css样式，值得关注一下。
样式中的css动画来自知名的动画库animation.css。因此，可以根据实际业务需要更换动画类。基本就是这样。
仿京东注册web移动端提示。
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<title>自定义alert</title>
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0,user-scalable=no" name="viewport" />
<style type="text/css">
html,
body {
padding: ;
margin: ;
}
/* //防止鼠标双击选中文字
*/ div { -khtml-user-select: none;
/*早期浏览器*/
user-select: none;
}
/* //来自animated.css的样式 */ @-webkit-keyframes fadeIn {
% {
opacity: .
}
% {
opacity:
}
% {
opacity: .
}
} .toast {
-webkit-animation-name: fadeIn;
-webkit-animation-duration: 3s;
-webkit-animation-iteration-count: ;
-webkit-animation-delay: 0s;
-webkit-transition: all .3s ease;
-moz-transition: all .3s ease;
transition: all .3s ease;
max-width: %;
color:#fff;
background: #2B2B2B;
padding: 8px 15px;
display: inline-table;
border-radius: 3px;
} .toast-ui {
position: fixed;
top:%;
color:#fff;
width: %;
text-align: center;
} .maskfadeout {
display: block;
-webkit-animation: fadeout 3s linear;
animation: fadeout 3s linear;
-webkit-animation-iteration-count: ;
animation-iteration-count:
} @-webkit-keyframes fadeout {
%,
% {
opacity:
}
% {
opacity:
}
} @keyframes fadeout {
%,
% {
opacity:
}
% {
opacity:
}
}
</style>
</head> <body>
<script type="text/javascript">
(function(win, doc) {
var alert = function(text, time, top) {
text = text || "确定删除？", time = time || , top = top || "10%"; //增加默认值，增强健壮性
var body = doc.getElementsByTagName("body")[]; //优化dom
//实现alert
var div = doc.createElement("div");
div.className = "toast-ui maskfadeout";
div.id = "alert";
var span = doc.createElement("span");
span.innerHTML = text;
span.className = "toast";
div.appendChild(span);
body.appendChild(div); setTimeout(function() {
div.style.display="none";
}, );
}
win.alert = alert; //导出
})(window, document);
alert("是否删除这条评论？");
</script>
</body> </html>
本文结束。
原生js实现自定义alert风格和实现的更多相关文章
- 使用原生js创建自定义标签
使用原生js创建自定义标签 效果图 代码 <!DOCTYPE html> <html lang="en"> <head> <meta ch ...
- ios UIWebView自定义Alert风格的弹框
之前开发过一个App,因为公司之前写好了网页版的内容和安卓版本的App,我进去后老板要求我ios直接用网页的内容,而不需要自己再搭建框架.我一听,偷笑了,这不就是一个UIWebView吗?简单! 但是 ...
- Vue结合原生js实现自定义组件自动生成
就目前三大前端主流数据驱动框架(vue,ng,react)而言,均具有创建自定义组件的api,但都是必须先做到事先写好挂载点,这个挂载点可以是原有静态元素标签也可以是自定义模板:对于多种组件通过同一数 ...
- 原生js 自定义confirm
本文参考博客园另一篇文章:https://www.cnblogs.com/hzj680539/p/5374052.html,在此感谢. 在实际开发当中,考虑到原生js组件,包括alert.confir ...
- 使用原生js自定义内置标签
使用原生js自定义内置标签 效果图 代码 <!DOCTYPE html> <html lang="en"> <head> <meta ch ...
- 原生js拖拽、jQuery拖拽、vue自定义指令拖拽
原生js拖拽: <!DOCTYPE html> <html lang="en"> <head> <meta charset="U ...
- 利用bootstrap的modal组件自定义alert，confirm和modal对话框
由于浏览器提供的alert和confirm框体验不好,而且浏览器没有提供一个标准的以对话框的形式显示自定义HTML的弹框函数,所以很多项目都会自定义对话框组件.本篇文章介绍自己在项目中基于bootst ...
- 原生JS 表单提交验证器
转载:http://www.cnblogs.com/sicd/p/4613628.html 一.前言 最近在开发一个新项目,需要做登陆等一系列的表单提交页面.在经过“缜密”的讨论后,我们决定 不用外部 ...
- 原生js dom记忆的内容
1.DOM基础getElementByIdgetElementByTagNamegetElementByName getElementsByClass querySelector querySelec ...
随机推荐
- 笔记-jinja2语法
笔记-jinja2语法 1. 基本语法 控制结构 {% %} 变量取值 {{ }} 注释 {# #} 2. 变量 最常用的是变量,由Flask渲染模板时传过来,比如上例中的”nam ...
- day 2 飞机大战原理
1. 程序的图片的坐标 (左上角为顶点) 2.图片变成动态的 3.集成显卡 和独立显卡
- ATextAppearance.AppCompat.Small not found
今天编译的代码的时候,刚才还是好的,后来吃个饭回来,就不行了. 报错如下: AGPBI: {"kind":"error","text":&q ...
- MySQL - 问题集 - Access denied; you need the SUPER privilege for
当执行存储过程相关操作时,如果出现该错误,则往下看. 打开存储过程,会发现“CREATE ALGORITHM=UNDEFINED DEFINER=`root`@`localhost`”. 由于DEFI ...
- linux-flock文件锁之实际运用
vi test.sh #! /bin/bash echo "Hello World" touch test.lock #随便命名 [root@localhost ~]# flock ...
- nodejs 事件机制
node 事件机制 一 三种定时器 NodeJS中有三种类型的定时器:超时时间.时间间隔.即时定时器 1.超时时间:setTimeout(callback,delayMilliSeconds,[a ...
- hdu2112HDU Today(floyd+map数组对字符串的应用)
HDU Today Time Limit: 15000/5000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others)Total ...
- 浅谈如何提高自动化测试的稳定性和可维护性 (pytest&allure)
装饰器与出错重试机制 谈到稳定性,不得不说的就是“出错重试”机制了,在自动化测试中,由于环境一般都是测试环境,经常会有各种各种的抽风情况影响测试结果,这样就为测试的稳定性带来了挑战,毕竟谁也不想自己的 ...
- grep命令及正则
文本查找 grep,egrep,fgrep grep :Global Research 根据模式搜索文本,并将符合模式的文本行显示出来 模式:Pattern,文本字符和正则的元字符组合而成匹配条件 g ...
- Python 集合内置函数大全（非常全！）
Python集合内置函数操作大全 集合(s).方法名 等价符号 方法说明 s.issubset(t) s <= t 子集测试(允许不严格意义上的子集):s 中所有的元素都是 t 的成员 s ...