代码如下:

<!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>

效果图如下:

html更改弹窗样式(原创,转载需声明)的更多相关文章

  1. ios 继承UITableViewController,更改tableview样式

    // 继承UITableViewController,更改tableview样式 - (instancetype)initWithStyle:(UITableViewStyle)style { ret ...

  2. 初识quartz 并分析 项目中spring整合quartz的配置【原创+转载】

    初识quartz 并分析 项目中spring整合quartz的配置[原创+转载]2018年01月29日 12:08:07 守望dfdfdf 阅读数:114 标签: quartz 更多个人分类: 工具 ...

  3. JavaScript--动态更改CSS样式

    JavaScript太强大了,虽然是弱语言,不过一点都不输于Java 可以自行设置随机数,来动态更改CSS样式,每一次都是不一样的感觉,这个小功能挺实用的 <!DOCTYPE html> ...

  4. 原生js更改css样式的两种方式

    下面我给大家介绍的是原生js更改CSS样式的两种方式: 1通过在javascript代码中的node.style.cssText="css表达式1:css表达式2:css表达式3  &quo ...

  5. 【javascript】原生js更改css样式的两种方式

    下面我给大家介绍的是原生js更改CSS样式的两种方式: 1通过在javascript代码中的node.style.cssText="css表达式1:css表达式2:css表达式3  &quo ...

  6. 如何在PeopleSoft中找到并更改默认样式表名称

    PeopleSoft的默认样式表名称是用来控制应用程序的外观的.在PeopleSoft中可以使用集中样式表来更改应用程序的外观,oracle为每个应用程序版本设置了默认的样式表. 下面是不同应用程序版 ...

  7. 微信小程序自定义弹窗wcPop插件|仿微信弹窗样式

    微信小程序自定义组件弹窗wcPop|小程序消息提示框|toast自定义模板弹窗 平时在开发小程序的时候,弹窗应用场景还是蛮广泛的,但是微信官方提供的弹窗比较有局限性,不能自定义修改.这个时候首先想到的 ...

  8. 零元学Expression Blend 4 - Chapter 28 ListBox的基本运用与更改预设样式

    原文:零元学Expression Blend 4 - Chapter 28 ListBox的基本运用与更改预设样式 本章将先教大家认识ListBox的基本运用与更改预设样式 本章将先教大家认识List ...

  9. DataGridView 更改Header样式

    '必须先设置 EnableHeadersVisualStyles 属性 才能设置Header颜色dgv.EnableHeadersVisualStyles = Falsedgv.ColumnHeade ...

随机推荐

  1. delphi xe 之路(14)使用FireMonkeyStyle(一共30篇)

    FireMonkey使用Style来控制控件的显示方式. 每个控件都有一个StyleLookup属性,FireMonkey就是通过控件的这个属性来在当前窗体的StyleBook控件中查找匹配的Styl ...

  2. Linux性能测试 netstat命令

    功能说明:Netstat用于显示与IP.TCP.UDP和ICMP协议相关的统计数据,一般用于检验本机各端口的网络连接情况.语 法:netstat [-acCeFghilMnNoprstuvVwx][- ...

  3. 文章之间的基本总结Activity生命周期

    子曰:溫故而知新,能够為師矣.<論語> 学习技术也一样,对于技术文档或者经典的技术书籍来说,指望看一遍就全然掌握,那基本不大可能,所以我们须要常常回过头再细致研读几遍,以领悟到作者的思想精 ...

  4. 构建自己的PHP框架(日志)

    完整项目地址:https://github.com/Evai/Aier 日志在程序开发中有着十分重要的作用,帮助开发者更快的找到程序错误并即时处理.下面制作一个非常简单的记录日志类. 在 servic ...

  5. ng-zorro 子菜单

    效果 代码 // 初始化菜单 // res.menu是一个Menu数组 // 在后端创建子菜单 res.menu.push({ text: "", i18n: "子菜单& ...

  6. CentOS6.5优盘安装

    从CentOS6.5开始直接把iso文件写入u盘就可实现优盘安装 windows平台:1.用UltraISO打开iso(如:CentOS-6.5-x86_64-bin-DVD1.iso)2.然后点“启 ...

  7. 使注解@ContextConfiguration同时支持locations和classes

    @Configuration @ImportResource("classpath:META-INF/dataContext.xml") class TestConfig { } ...

  8. canvas——粒子系统(1)

    这个动画在很早之前就见过,当时就没迷住了.最近在学canavs动画,动手实现了一下.代码在这里.展示效果在这里. 这属于粒子系统的一种,粒子系统就是需要管理一堆粒子嘛,动画实现的关键在于,遍历这些粒子 ...

  9. VS中添加第三方库及相对路径设置

    原文 VS中添加第三方库及相对路径设置 对于一些第三方的SDK,一般会包含头文件(*.h),静态库文件(*.lib)和动态库文件(*.dll). 1.  文件位置:为了提高程序的可移植性,将第三库放在 ...

  10. 京东sdk商家上架接口调用问题总结

    前言: 最近在做商家发布产品,调用京东sdk,发现问题很多,而且还是在我同事的帮助下完成的,摸索中,菜鸟还请高手门多多提携才好,入正题 首先是引用jd的sdk啦,京东sdk中发布商品需要调用一个 36 ...