如何修改alert样式
HTML5学堂:无论是PC还是移动端,系统自带alert样式总是让人感觉很丑陋,今天就教大家如何修改alert弹窗样式。
只能自定一个弹窗样式
首先必须明白的一点是,alert()只是一个方法,而这个方法内部是native code,这是我们无法修改的部分,而最终暴露的只有这个alert()方法名字而已,你甚至拿不到alert的属性,因此要真正意义上的做到修改alert样式是不可行的。
有了以上这个条件基础,我们能做的只有重写alert()方法,替换掉系统自带的alert()方法。
一行代码替换alert()方法
window.alert = function() {};
看到这,就有很多人已经明了了,首先你可以先写好一个假的弹窗样式,然后通过这种方式显示出来,这种是html css js 三方同时更改达到效果,你也可以全部都JavaScript去完成结构样式的操作,今天我们的示例就是全部通过js来完成结构样式控制。
明确了基本方式是通过替换alert()方法,那么就开始进一步的思考实现步骤。
实现自定义alert()方法的步骤
确定弹窗样式HTML结构 —— 结构插入 —— 样式控制 —— 点击确定删除结构
确定结构
<div>
<p>alert内容</p>
<div>确定</div>
</div>
使用JS处理结构
于是有了下面这段代码:
window.alert = alert;
function alert(data) {
var a = document.createElement("div"),//创建最外围标签
p = document.createElement("p"),//创建显示内容的p标签
btn = document.createElement("div"),//创建按钮标签
textNode = document.createTextNode(data),//创建一个文字节点
btnText = document.createTextNode("确定");//创建文字节点
// 内部结构套入
p.appendChild(textNode);//将需要显示的内容节点插入p标签内
btn.appendChild(btnText);//将按钮文字插入按钮标签
a.appendChild(p);//将p标签插入外围div
a.appendChild(btn);//将按钮插入外围div
// 整体显示到页面内
document.getElementsByTagName("body")[0].appendChild(a);
}
这里为什么不直接用window.alert = function() {};方法呢,这里考虑预编译时并不会对window.alert进行赋值,如果用这种方式写的话,在window.alert = function() {} 之前调用alert()还会是系统自带alert。
当你初步调用alert()时,如果不传参数会报错,那么我们需要一个data的判断,textNode = document.createTextNode(data)就可改成textNode = document.createTextNode(data ? data : "")
优化当前的JS代码
接下来我们会发现,我们还缺少样式和确定关闭功能。这里完全可以用DOM0级事件绑定。代码很快变成了这样:
window.alert = alert;
function alert(data) {
var a = document.createElement("div"),
p = document.createElement("p"),
btn = document.createElement("div"),
textNode = document.createTextNode(data ? data : ""),
btnText = document.createTextNode("确定");
// 内部结构套入
p.appendChild(textNode);
btn.appendChild(btnText);
a.appendChild(p);
a.appendChild(btn);
// 整体显示到页面内
document.getElementsByTagName("body")[0].appendChild(a);
// 确定绑定点击事件删除标签
btn.onclick = function() {
a.parentNode.removeChild(a);
}
}
样式控制
还剩下最后一个样式控制问题。为了写起来更美观更方便,我们需要写一个方法来控制样式。
function css(targetObj, cssObj) {
for(var i in cssObj) {
targetObj.style[i] = cssObj[i];
}
}
这样我们就可以通过如下方式控制样式:
css(target, {
“background-color” : “red”,
“text-align” : “center”,
})
wait wait,还没完
测试后发现,如上的这种样式书写方式,IE8下面有渲染问题,那我们换成cssText。所以,样式控制代码改为——>
function css(targetObj, cssObj) {
var str = targetObj.getAttribute("style") ? targetObj.getAttribute("style") : "";
for(var i in cssObj) {
str += i + ":" + cssObj[i] + ";";
}
targetObj.style.cssText = str;
}
这样咱就解决IE8的尴尬了,但是同时也带来了其他问题,字符串拼接,有可能会出现重复属性,因此如果你需要做一个通用的,还需要对字符串进行查重,但对于本例来说完全够用了。
完成版的alert功能
我们的demo就成了这样(样式还是自己调吧,下面的样式只是做个示范):
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>HTML5学堂 - alert</title>
</head>
<body>
<script>
window.alert = alert;
function alert(data) {
var a = document.createElement("div"),
p = document.createElement("p"),
btn = document.createElement("div"),
textNode = document.createTextNode(data ? data : ""),
btnText = document.createTextNode("确定");
// 控制样式
css(a, {
"position" : "fixed",
"left" : "0",
"right" : "0",
"top" : "20%",
"width" : "100px",
"margin" : "0 auto",
"background-color" : "#f00",
"font-size" : "20px",
"text-align" : "center"
});
css(btn, {
"background" : "blue",
})
// 内部结构套入
p.appendChild(textNode);
btn.appendChild(btnText);
a.appendChild(p);
a.appendChild(btn);
// 整体显示到页面内
document.getElementsByTagName("body")[0].appendChild(a);
// 确定绑定点击事件删除标签
btn.onclick = function() {
a.parentNode.removeChild(a);
}
}
function css(targetObj, cssObj) {
var str = targetObj.getAttribute("style") ? targetObj.getAttribute("style") : "";
for(var i in cssObj) {
str += i + ":" + cssObj[i] + ";";
}
targetObj.style.cssText = str;
}
alert(123);
</script>
</body>
</html>
最后总结下,本例运用到的知识点,DOM操作、预编译期与执行、for-in循环,cssText。本文的主要目的在于引导思路,无论做什么项目,思路很重要,要懂得变通,如果你想通过某些属性去修改alert样式,那你想破头都想不出,所有效果实现方法都不是唯一的,仅仅只是需要一个你想要的alert样式,完全可以“造假”,合理利用“造假”的方法,可以使你的效果写起来比别人轻松很多。
本文章内容小编:HTML5学堂-其其。耗时3h~
- Ajax jsonp 跨域请求实例
- asp.net动态解析用户控件(UserControl)
- 找到多个与名为“Home”的控制器匹配的类型的解决方案
- 关于sequence问题的紧急处理(r2第26天)
- 使用动态变量进行动态数据比较(r2笔记25天)
- MVC分部视图@Html.Partial
- 基于马尔科夫链的产品评估预测
- MVC 控制器中传递dynamic(对象) 给视图
- 使用copy命令解决LONG类型的困扰(r2第24天)
- MVC 获取路由的 URL 参数值和默认值的集合。
- 用libsvm进行回归预测
- mvc路由配置.html结尾的伪静态
- 【编程基础】Java的接口和抽象类
- 循序渐进调优union相关的sql(r2笔记23天)
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- android采用FFmpeg实现音视频合成与分离
- 如何在Node.js和Express中上传文件
- Android底部导航栏的动态替换方案
- Android自定义View实现饼状图带动画效果
- Android音视频之视频采集(系统API预览)
- 在Node.js中使用Multer进行文件上传
- Android实现自动填充短信验证码功能
- django项目中新增app的2种实现方法
- 如何使用Node.js编辑XML文件
- Windows下安装yarn的三种方法
- python topk()函数求最大和最小值实例
- 详解Ubuntu环境下部署Django+uwsgi+nginx总结
- 如何从Node.js中的命令行读取输入
- pyqt5中动画的使用详解
- PyQt使用QPropertyAnimation开发简单动画