html更改弹窗样式（原创，转载需声明）

代码如下：

<!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"),title = document.createElement("p"),content = document.createElement("p"),btn = document.createElement("div"),textNode = document.createTextNode(data ? data : ""),btnText = document.createTextNode("确定");// 控制样式
            css(a, {"width" : "430px","height" : "120px","border": "1px solid #000","margin" : "0 auto"});css(btn, {"background-color": "#008CBA","border": "none","color": "white","padding": "8px 28px","text-align": "center","text-decoration": "none","display": "inline-block","font-size": "8px","float" : "right"});css(title, {"font-size" : "18px","width" : "250px","height" : "20px"});css(content, {"font-size" : "14px","width" : "250px","height" : "20px","text-align": "center"})// 内部结构套入
            title.appendChild(document.createTextNode("友情提示："));content.appendChild(textNode);btn.appendChild(btnText);a.appendChild(title);a.appendChild(content);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("用户名不能为空");</script>
</body>
</html>

效果图如下：

转载于:https://www.cnblogs.com/haojun/p/10439269.html

html更改弹窗样式（原创，转载需声明）相关推荐

html的confirm弹窗样式修改,模拟自定义alert与confirm样式
前段时间做ACG Balrogs的时候感觉系统自带的alert与confirm非常难看,所以百度了一下这两个的自定义,但是一看百度上面的代码!WTF?什么鬼,根本看不懂,对于我这种js渣来说简直是在看 ...
用迅捷CAD编辑器怎么更改文字样式
利用CAD图形类文件,里面的文字的有些跟数据上对不上,这时候我们就想能够编辑.修改里面的字体.这确实是比较麻烦的,不过不加先不用着急,在这里小编这里有个好用的方法可以直接操作,接下来就详细的了解用迅捷 ...
reactjs antd（ant-design）安装、基本使用及css样式的按需引入
reactjs antd(ant-design)安装.基本使用及css样式的按需引入
css vue 选项卡_vuejs实现标签选项卡动态更改css样式的方法
html {{item.name}} js var app = new Vue({ el:"#app", router, data:{ m:"hello vue.js&q ...
修改左侧导航显示样式（转载自Sunmoonfire's artistic matrix）
这是一片非常好的文章,修改下CSS就可以改变左侧导航栏的样式,在网上找了一些都是要写代码的.怕连接失效,所以直接将文章考了过来,希望作者原谅,如有不妥,请通知一声,我会将文章删掉! WSS3SDK之: ...
原生js更改html,原生js更改css样式的两种方式
原生js更改css样式的两种方式发布时间:2020-08-30 01:46:17 来源:脚本之家阅读:148 作者:外婆的彭湖湾下面我给大家介绍的是原生js更改CSS样式的两种方式: 1. 通过 ...
QListWidget与QTableWidget的使用以及样式设置-转载自明之季
QListWidget与QTableWidget的使用以及样式设置-转载自明之季 QListWidget和QTableWidget的使用和属性,QTableWidget和QListWidget样式表的 ...
jq.html()改变颜色,jquery怎么更改css样式？
使用jQuery可以更改CSS的样式,例如更改颜色或在执行操作时更改元素的大小,本篇文章我们就来给大家介绍使用jQuery更改CSS样式的具体方法,下面来看具体的内容. 在jQuery中,可以使用CS ...
CAD展点+更改点样式
有的东西真的用一遍,可能就再也不用了,但还是写笔记记录下来吧. 而且,还发现,以前学的很熟悉的东西,不用的话,全都忘记了. 但是,毕竟学过,拾起来简单一点. 一.将点展到CAD中 (注意:全站仪的X. ...

html更改弹窗样式（原创，转载需声明）

html更改弹窗样式（原创，转载需声明）相关推荐

最新文章

热门文章