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>
效果图如下:
html更改弹窗样式(原创,转载需声明)的更多相关文章
- ios 继承UITableViewController,更改tableview样式
// 继承UITableViewController,更改tableview样式 - (instancetype)initWithStyle:(UITableViewStyle)style { ret ...
- 初识quartz 并分析 项目中spring整合quartz的配置【原创+转载】
初识quartz 并分析 项目中spring整合quartz的配置[原创+转载]2018年01月29日 12:08:07 守望dfdfdf 阅读数:114 标签: quartz 更多个人分类: 工具 ...
- JavaScript--动态更改CSS样式
JavaScript太强大了,虽然是弱语言,不过一点都不输于Java 可以自行设置随机数,来动态更改CSS样式,每一次都是不一样的感觉,这个小功能挺实用的 <!DOCTYPE html> ...
- 原生js更改css样式的两种方式
下面我给大家介绍的是原生js更改CSS样式的两种方式: 1通过在javascript代码中的node.style.cssText="css表达式1:css表达式2:css表达式3 &quo ...
- 【javascript】原生js更改css样式的两种方式
下面我给大家介绍的是原生js更改CSS样式的两种方式: 1通过在javascript代码中的node.style.cssText="css表达式1:css表达式2:css表达式3 &quo ...
- 如何在PeopleSoft中找到并更改默认样式表名称
PeopleSoft的默认样式表名称是用来控制应用程序的外观的.在PeopleSoft中可以使用集中样式表来更改应用程序的外观,oracle为每个应用程序版本设置了默认的样式表. 下面是不同应用程序版 ...
- 微信小程序自定义弹窗wcPop插件|仿微信弹窗样式
微信小程序自定义组件弹窗wcPop|小程序消息提示框|toast自定义模板弹窗 平时在开发小程序的时候,弹窗应用场景还是蛮广泛的,但是微信官方提供的弹窗比较有局限性,不能自定义修改.这个时候首先想到的 ...
- 零元学Expression Blend 4 - Chapter 28 ListBox的基本运用与更改预设样式
原文:零元学Expression Blend 4 - Chapter 28 ListBox的基本运用与更改预设样式 本章将先教大家认识ListBox的基本运用与更改预设样式 本章将先教大家认识List ...
- DataGridView 更改Header样式
'必须先设置 EnableHeadersVisualStyles 属性 才能设置Header颜色dgv.EnableHeadersVisualStyles = Falsedgv.ColumnHeade ...
随机推荐
- Python属性和方法
关键字:Python 属性 方法原文:http://www.cafepy.com/article/python_attributes_and_methods/python_attributes_and ...
- .NET内置的Ajax工作原理
在期望不执行回发(postback)而从客户端运行服务器代码的情况下,可以使用ClientScriptManager类来调用客户端回调(callback).这称为对服务器执行带外回调.在客户端回调中, ...
- 此C语言功能---A
功能名称: abort 动力 能够: 异常终止的过程的 使用 法国: void abort(void); 程序示例: #include <stdio.h> #include <std ...
- 怎么快速构建自己的C/C++程序?——有关编译、静态链接和SCons
怎么快速构建自己的C/C++程序?--有关编译.静态链接和SCons 1. 写在前面 最初写C++是在Visual Studio这个IDE里,那时我并没有makefile的概念,对程序的编译和链接的一 ...
- mingw-w64-3.10-osx10.9.sh,uninstall-macports.sh,Build NSIS on OSX
https://gist.github.com/artynet/188bb34cfc94acdb554d283a3502770a --cross-compile-prefix=i686-w64-min ...
- DOS符号转义(转 http://www.robvanderwoude.com/escapechars.php)
Escape Characters Character to be escaped Escape Sequence Remark % %% May not always be required in ...
- 使注解@ContextConfiguration同时支持locations和classes
@Configuration @ImportResource("classpath:META-INF/dataContext.xml") class TestConfig { } ...
- CreateThread传递多个参数的方法(利用结构体的参数指针)
很多朋友一直都在问CreateThread如何传递多个参数,CreateThread传递参数的方式是指针传递的,所以这里也可以利用指针来做!Demo 关键代码如下: type TfrmTestThr ...
- Cordova页面加载外网图片失败,Refused to load the image
原文:Cordova页面加载外网图片失败,Refused to load the image 1.使用Cordova页面加载外网图片失败,抛出异常 Refused to load the image ...
- vs2017 cordova js 签名配置
在build.json文件中添加如下 { "android": { "release": { "keystore": "C:\\D ...