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 相关文章推荐
用JQuery 实现的自定义对话框
Mar 24 Javascript
JS判断不同分辨率调用不同的CSS样式文件实现思路及测试代码
Jan 23 Javascript
Jquery实现显示和隐藏的4种简单方式
Aug 28 Javascript
angularJS 中$scope方法使用指南
Feb 09 Javascript
jQuery实现跨域iframe接口方法调用
Mar 14 Javascript
关于延迟加载JavaScript
May 05 Javascript
javascript表单验证大全
Aug 12 Javascript
jquery树形菜单效果的简单实例
Jun 06 Javascript
js制作可以延时消失的菜单
Jan 13 Javascript
vue-router之实现导航切换过渡动画效果
Oct 31 Javascript
Vue表单提交点击事件只允许点击一次的实例
Oct 23 Javascript
vue报错function () { [native code] },无法出现我们想要的内容 Unknown custom element
Apr 11 Vue.js
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
linux中cd命令使用详解
2015/01/08 PHP
checkbox使用示例
2013/08/23 Javascript
基于jQuery实现的菜单切换效果
2015/10/16 Javascript
JS获取CSS样式(style/getComputedStyle/currentStyle)
2016/01/19 Javascript
JavaScript基础重点(必看)
2016/07/09 Javascript
JavaScript常用代码书写规范的超全面总结
2016/09/11 Javascript
使用JavaScript实现alert的实例代码
2017/07/06 Javascript
AngularJS实现select的ng-options功能示例
2017/07/12 Javascript
最后说说Vue2 SSR 的 Cookies 问题
2018/05/25 Javascript
JavaScript实现JSON合并操作示例【递归深度合并】
2018/09/07 Javascript
对angularjs框架下controller间的传值方法详解
2018/10/08 Javascript
jQuery操作选中select下拉框的值代码实例
2020/02/07 jQuery
vue+axios全局添加请求头和参数操作
2020/07/24 Javascript
Javascript柯里化实现原理及作用解析
2020/10/22 Javascript
JS模拟实现京东快递单号查询
2020/11/30 Javascript
[01:06] DOTA2英雄背景故事第三期之秩序法则光之守卫
2020/07/07 DOTA
python中range()与xrange()用法分析
2016/09/21 Python
在IPython中进行Python程序执行时间的测量方法
2018/11/01 Python
Python文件操作中进行字符串替换的方法(保存到新文件/当前文件)
2019/06/28 Python
python3获取url文件大小示例代码
2019/09/18 Python
关于Python turtle库使用时坐标的确定方法
2020/03/19 Python
python实现录音功能(可随时停止录音)
2020/10/26 Python
比利时香水网上商店:NOTINO
2018/03/28 全球购物
Trina Turk官网:美国时装和泳装品牌
2018/06/10 全球购物
电子信息工程专业推荐信
2014/02/14 职场文书
《姥姥的剪纸》教学反思
2014/02/25 职场文书
会计专业个人自我鉴定
2014/03/21 职场文书
2014年学习部工作总结
2014/11/12 职场文书
大学毕业生自我评价
2015/03/02 职场文书
教师节班会开场白
2015/06/01 职场文书
新店开张宣传语
2015/07/13 职场文书
2015年国庆节寄语
2015/08/17 职场文书
2016年小学“我们的节日·中秋节”活动总结
2016/04/05 职场文书
《没有任何借口》读后感:完美的执行能力
2020/01/07 职场文书
Python初识逻辑与if语句及用法大全
2021/08/07 Python
python读取mat文件生成h5文件的实现
2022/07/15 Python