原生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 ...
随机推荐
- Jupyter Notebook的魔法
在腾讯云上搭建了一个Jupyter Notebook 还是很好用的, 这里总结了一些看到的小技巧及快捷键使得我们更加快捷的完成工作. Notebook 与 Vim 有些类似,有两种键盘输入模式,即命令 ...
- 基于FDC2214的手势识别
基于FDC2214的手势识别 1.本次题目来源于2018年全国电子设计大赛D题,要求实现对石头.剪刀.布以及数字12345的识别:同时在上述基础上实现对手势的学习. 2.硬件实现: 硬件主要采用STM ...
- vue cli3超详细创建多页面配置
1.首先按照vue cli3 给的入门文档下载个vue cli3 如果之前下载了vue cli2的要先卸载之前的 2.检查安装是否成功 3.ok,现在环境搭建好了,新建项目 vue create he ...
- 为什么我要放弃javaScript数据结构与算法（第四章）—— 队列
有两种结构类似于数组,但在添加和删除元素时更加可控,它们就是栈和队列. 第四章 队列 队列数据结构 队列是遵循FIFO(First In First Out,先进先出,也称为先来先服务)原则的一组有序 ...
- HTML基础part1
HTML基础 Web的本质就是利用浏览器访问socket服务端,socket服务端收到请求回复数据提供给浏览器进行渲染显示. import socket def main(): sock = sock ...
- Mybatis之XML、注解
前言 上篇简单介绍了Mybatis的简单实用,本篇先对上次实验环境的一些内容进行优化,然后验证Mybatis的XML配置以及注解方式. 实验环境优化 数据库配置 在mybatis的配置文件中,引入数据 ...
- Ｍybatis简单入门
前言 之前一直有直接使用Mybatis,但是没有细致的整理出来.长时间没有使用,细致的内容都忘记了.因此借此机会,从头开始整理,以后可以直接查看此次记录的内容. Mybatis的介绍 MyBatis是 ...
- js三种存储方式区别
javaScript有三种数据存储方式,分别是: sessionStorage localStorage cookier 相同点:都保存在浏览器端,同源的 不同点: ①传递方式不同 cookie数据始 ...
- Unbuntu安装RVM
apt-get install curl #安装rvm curl -L https://get.rvm.io | bash #执行启动 source /home/mafei/.rvm/scripts/ ...
- 了解和分析iOS Crash
WeTest 导读 北京时间凌晨一点,苹果一年一度的发布会如期而至.新机型的发布又会让适配相关的同学忙上一阵子啦,并且iOS Crash的问题始终伴随着移动开发者.本文将从三个阶段,由浅入深的介绍如何 ...