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编程起步(第二课)
Jan 10 Javascript
jQuery AjaxQueue改进步骤
Oct 06 Javascript
jquery选择器原理介绍($()使用方法)
Mar 25 Javascript
JS实现超简洁网页title标题跑动闪烁提示效果代码
Oct 23 Javascript
Angularjs 设置全局变量的方法总结
Oct 20 Javascript
JS实现的五级联动菜单效果完整实例
Feb 23 Javascript
jQuery插件HighCharts绘制的2D堆柱状图效果示例【附demo源码下载】
Mar 14 Javascript
bootstrap警告框示例代码分享
May 17 Javascript
jquery获取链接地址和跳转详解(推荐)
Aug 15 jQuery
VUE接入腾讯验证码功能(滑块验证)备忘
May 07 Javascript
用js编写留言板
Mar 17 Javascript
如何基于viewport vm适配移动端页面
Nov 13 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
mysql 字段类型说明
2007/04/27 PHP
PHP实现微信提现(企业付款到零钱)
2019/08/01 PHP
javascript实现的基于金山词霸网络翻译的代码
2010/01/15 Javascript
如何使用Jquery获取Form表单中被选中的radio值
2013/08/09 Javascript
JavaScript使用位运算符判断奇数和偶数的方法
2015/06/01 Javascript
ECMAScript中函数function类型
2015/06/03 Javascript
使用AngularJS对路由进行安全性处理的方法
2015/06/18 Javascript
JavaScript电子时钟倒计时
2016/01/09 Javascript
分享12个非常实用的JavaScript小技巧
2016/05/11 Javascript
每日十条JavaScript经验技巧(一)
2016/06/23 Javascript
jQuery实现自动输入email、时间和域名的方法
2016/08/24 Javascript
浅谈js对象的创建和对6种继承模式的理解和遐想
2016/10/16 Javascript
Jquery Easyui对话框组件Dialog使用详解(14)
2016/12/19 Javascript
js面向对象编程总结
2017/02/16 Javascript
vue实现form表单与table表格的数据关联功能示例
2019/01/29 Javascript
详解微信小程序获取当前时间及日期的方法
2019/04/28 Javascript
vue eslint简要配置教程详解
2019/07/26 Javascript
解决Layui中layer报错的问题
2019/09/03 Javascript
解决layui table表单提示数据接口请求异常的问题
2019/09/24 Javascript
node.js基础知识汇总
2020/08/25 Javascript
原生JS实现pc端轮播图效果
2020/12/21 Javascript
[01:11:21]DOTA2-DPC中国联赛 正赛 Phoenix vs CDEC BO3 第三场 3月7日
2021/03/11 DOTA
Python break语句详解
2014/03/11 Python
Python匹配中文的正则表达式
2016/05/11 Python
Python实现TCP探测目标服务路由轨迹的原理与方法详解
2019/09/04 Python
Django REST框架创建一个简单的Api实例讲解
2019/11/05 Python
Windows上安装tensorflow  详细教程(图文详解)
2020/02/04 Python
python用Tkinter做自己的中文代码编辑器
2020/09/07 Python
Pytorch生成随机数Tensor的方法汇总
2020/09/09 Python
深入剖析webstorage[html5的本地数据处理]
2016/07/11 HTML / CSS
SISLEY希思黎官方旗舰店:享誉全球的奢华植物美容品牌
2018/04/25 全球购物
工程部主管岗位职责
2013/11/17 职场文书
2014年科普工作总结
2014/12/06 职场文书
2014年外贸业务员工作总结
2014/12/11 职场文书
员工年度工作总结2015
2015/05/18 职场文书
索尼ICF-36收音机评测
2022/04/30 无线电