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 相关文章推荐
javascript 面向对象思想 附源码
Jul 07 Javascript
IE之动态添加DOM节点触发window.resize事件
Jul 27 Javascript
jQuery对象的length属性用法实例
Dec 27 Javascript
javascript异步编程代码书写规范Promise学习笔记
Feb 11 Javascript
JavaScript 计算笛卡尔积实例详解
Dec 02 Javascript
JS自定义函数实现时间戳转换成date的方法示例
Aug 27 Javascript
详解plotly.js 绘图库入门使用教程
Feb 23 Javascript
使用vuex存储用户信息到localStorage的实例
Nov 11 Javascript
微信小程序实现发微博功能的示例代码
Jun 24 Javascript
vue中的循环对象属性和属性值用法
Sep 04 Javascript
详解JavaScript中的链式调用
Nov 27 Javascript
微信小程序实现录音Record功能
May 09 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
php算开始时间到过期时间的相隔的天数
2011/01/12 PHP
php数组函数序列之array_intersect() 返回两个或多个数组的交集数组
2011/11/10 PHP
微信公众号开发之微信公共平台消息回复类实例
2014/11/14 PHP
PHP发送短信代码分享
2015/08/11 PHP
PHP 使用 Imagick 裁切/生成缩略图/添加水印自动检测和处理 GIF
2016/02/19 PHP
laravel 解决groupBy时出现的错误 isn't in Group By问题
2019/10/17 PHP
javascript的trim,ltrim,rtrim自定义函数
2008/09/21 Javascript
修复ie8&amp;chrome下window的resize事件多次执行
2011/10/20 Javascript
JavaScript获取onclick、onchange等事件值的代码
2013/07/22 Javascript
Javascript变量作用域详解
2013/12/06 Javascript
js操作输入框提示信息且响应鼠标事件
2014/03/25 Javascript
JavaScript中常用的六种互动方法示例
2015/03/13 Javascript
JavaScript中Number.MAX_VALUE属性的使用方法
2015/06/04 Javascript
js验证真实姓名与身份证号是否匹配
2015/10/13 Javascript
分析js闭包引起的事件注册问题
2016/03/29 Javascript
jQuery树形插件jquery.simpleTree.js用法分析
2016/09/05 Javascript
Angular.JS学习之依赖注入$injector详析
2016/10/20 Javascript
简单理解vue中实例属性vm.$els
2016/12/01 Javascript
nodejs动态创建二维码的方法
2017/08/12 NodeJs
微信小程序wepy框架笔记小结
2018/08/08 Javascript
基于mpvue搭建微信小程序项目框架的教程详解
2019/04/10 Javascript
说说Vuex的getters属性的具体用法
2019/04/15 Javascript
ES6的解构赋值实例详解
2019/05/06 Javascript
vue中v-for循环选中点击的元素并对该元素添加样式操作
2020/07/17 Javascript
python下函数参数的传递(参数带星号的说明)
2010/09/19 Python
python调用机器喇叭发出蜂鸣声(Beep)的方法
2015/03/23 Python
实例解析Python中的__new__特殊方法
2016/06/02 Python
浅析python中的分片与截断序列
2016/08/09 Python
numpy.transpose对三维数组的转置方法
2018/04/17 Python
在Python中合并字典模块ChainMap的隐藏坑【推荐】
2019/06/27 Python
《跟踪台风的卫星》教学反思
2014/04/10 职场文书
关于十八大的演讲稿
2014/09/15 职场文书
2015年保险公司个人工作总结
2015/05/22 职场文书
中学校园广播稿
2015/08/18 职场文书
《生物入侵者》教学反思
2016/02/16 职场文书
Html5新增了哪些功能
2021/04/16 HTML / CSS