js的alert样式如何更改如背景颜色


Posted in Javascript onJanuary 22, 2014
window.alert = function(str) 
{ 
var shield = document.createElement("DIV"); 
shield.id = "shield"; 
shield.style.position = "absolute"; 
shield.style.left = "0px"; 
shield.style.top = "0px"; 
shield.style.width = "100%"; 
shield.style.height = document.body.scrollHeight+"px"; 
//弹出对话框时的背景颜色 
shield.style.background = "#fff"; 
shield.style.textAlign = "center"; 
shield.style.zIndex = "25"; 
//背景透明 IE有效 
//shield.style.filter = "alpha(opacity=0)"; 
var alertFram = document.createElement("DIV"); 
alertFram.id="alertFram"; 
alertFram.style.position = "absolute"; 
alertFram.style.left = "50%"; 
alertFram.style.top = "50%"; 
alertFram.style.marginLeft = "-225px"; 
alertFram.style.marginTop = "-75px"; 
alertFram.style.width = "450px"; 
alertFram.style.height = "150px"; 
alertFram.style.background = "#ff0000"; 
alertFram.style.textAlign = "center"; 
alertFram.style.lineHeight = "150px"; 
alertFram.style.zIndex = "300"; 
strHtml = "<ul style=\"list-style:none;margin:0px;padding:0px;width:100%\">\n"; 
strHtml += " <li style=\"background:#DD828D;text-align:left;padding-left:20px;font-size:14px;font-weight:bold;height:25px;line-height:25px;border:1px solid #F9CADE;\">[自定义提示]</li>\n"; 
strHtml += " <li style=\"background:#fff;text-align:center;font-size:12px;height:120px;line-height:120px;border-left:1px solid #F9CADE;border-right:1px solid #F9CADE;\">"+str+"</li>\n"; 
strHtml += " <li style=\"background:#FDEEF4;text-align:center;font-weight:bold;height:25px;line-height:25px; border:1px solid #F9CADE;\"><input type=\"button\" value=\"确 定\" onclick=\"doOk()\" /></li>\n"; 
strHtml += "</ul>\n"; 
alertFram.innerHTML = strHtml; 
document.body.appendChild(alertFram); 
document.body.appendChild(shield); 
var ad = setInterval("doAlpha()",5); 
this.doOk = function(){ 
alertFram.style.display = "none"; 
shield.style.display = "none"; 
} 
alertFram.focus(); 
document.body.onselectstart = function(){return false;}; 
}

效果如图
js的alert样式如何更改如背景颜色
Javascript 相关文章推荐
Extjs学习笔记之一 初识Extjs之MessageBox
Jan 07 Javascript
js实现仿Windows风格选项卡和按钮效果实例
May 13 Javascript
js实现可折叠展开的手风琴菜单效果
Sep 07 Javascript
AngularJS中如何使用$parse或$eval在运行时对Scope变量赋值
Jan 25 Javascript
Bootstrap每天必学之滚动监听
Mar 16 Javascript
Ionic实现页面下拉刷新(ion-refresher)功能代码
Jun 03 Javascript
详解 vue.js用法和特性
Oct 15 Javascript
VUE 配置vue-devtools调试工具及安装方法
Sep 30 Javascript
javascript实现遮罩层动态效果实例
May 14 Javascript
使用Angular material主题定义自己的组件库的配色体系
Sep 04 Javascript
vue项目配置使用flow类型检查的步骤
Mar 18 Javascript
JS制作简易计算器的实例代码
Jul 04 Javascript
javascript 获取网页标题代码实例
Jan 22 #Javascript
js完美的div拖拽实例代码
Jan 22 #Javascript
jquery中对于批量deferred的处理方法
Jan 22 #Javascript
jquery基础教程之deferred对象使用方法
Jan 22 #Javascript
jquery each的几种常用的使用方法示例
Jan 21 #Javascript
JavaScript在for循环中绑定事件解决事件参数不同的情况
Jan 20 #Javascript
javascript break指定标签打破多层循环示例
Jan 20 #Javascript
You might like
stripos函数知识点实例分享
2019/02/11 PHP
javascript的onchange事件与jQuery的change()方法比较
2009/09/28 Javascript
window.open不被拦截的实现代码
2012/08/22 Javascript
javascript结合html5 canvas实现(可调画笔颜色/粗细/橡皮)的涂鸦板
2013/04/27 Javascript
BootStrap中Tab页签切换实例代码
2016/05/30 Javascript
Bootstrap fileinput组件封装及使用详解
2017/03/10 Javascript
js实现音乐播放控制条
2017/09/09 Javascript
JS实现动态星空背景效果
2019/11/01 Javascript
python检测文件夹变化,并拷贝有更新的文件到对应目录的方法
2018/10/17 Python
对Python3 * 和 ** 运算符详解
2019/02/16 Python
Python初学者常见错误详解
2019/07/02 Python
Python Selenium截图功能实现代码
2020/04/26 Python
python怎么调用自己的函数
2020/07/01 Python
详解在Python中使用Torchmoji将文本转换为表情符号
2020/07/27 Python
Python 如何创建一个线程池
2020/07/28 Python
python使用requests库爬取拉勾网招聘信息的实现
2020/11/20 Python
Html5新标签datalist实现输入框与后台数据库数据的动态匹配
2017/05/18 HTML / CSS
加拿大最大的体育用品、鞋类和服装零售商:Sport Chek
2018/11/29 全球购物
英国第一的市场和亚马逊替代品:OnBuy
2019/03/16 全球购物
澳大利亚最大的在线美发和美容零售商之一:My Hair Care & Beauty
2019/08/24 全球购物
测绘工程本科生求职信
2013/10/10 职场文书
门卫班长岗位职责
2013/12/15 职场文书
医药代表个人求职信范本
2013/12/19 职场文书
幼儿教师工作感言
2014/02/14 职场文书
学校组织向国旗敬礼活动方案(中小学适用)
2014/09/27 职场文书
机关作风建设自查报告及整改措施
2014/10/21 职场文书
先进个人申报材料
2014/12/30 职场文书
公司经营目标责任书
2015/01/29 职场文书
酒店服务员岗位职责
2015/02/09 职场文书
酒店前台辞职书
2015/02/26 职场文书
校园广播站开场白
2015/06/01 职场文书
校园文化艺术节开幕词
2016/03/04 职场文书
百善孝为先:关于孝道的经典语录
2019/10/18 职场文书
2020年个人安全保证书参考模板
2020/01/08 职场文书
如何利用Matlab制作一款真正的拼图小游戏
2021/05/11 Python
vue实现可拖拽的dialog弹框
2021/05/13 Vue.js