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中的闭包原理分析
Mar 08 Javascript
JavaScript判断FileUpload控件上传文件类型
Sep 28 Javascript
js实现的彩色方块飞舞奇幻效果
Jan 27 Javascript
Function.prototype.apply()与Function.prototype.call()小结
Apr 27 Javascript
knockoutjs动态加载外部的file作为component中的template数据源的实现方法
Sep 01 Javascript
Bootstrap CSS组件之大屏幕展播
Dec 17 Javascript
图片懒加载插件实例分享(含解析)
Jan 09 Javascript
AngularJS标签页tab选项卡切换功能经典实例详解
May 16 Javascript
浅谈JavaScript闭包
Apr 09 Javascript
JavaScript自定义超时API代码实例
Apr 30 Javascript
解决vue+router路由跳转不起作用的一项原因
Jul 19 Javascript
详解JavaScript中Arguments对象用途
Aug 30 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
通过html表格发电子邮件
2006/10/09 PHP
PHP JSON格式数据交互实例代码详解
2011/01/13 PHP
PHP编写的图片验证码类文件分享
2016/06/06 PHP
tp5(thinkPHP5框架)使用DB实现批量删除功能示例
2019/05/28 PHP
Opacity.js
2007/01/22 Javascript
javascript比较文档位置
2008/04/08 Javascript
读jQuery之五(取DOM元素)
2011/06/20 Javascript
JS基于Ajax实现的网页Loading效果代码
2015/10/27 Javascript
基于jquery实现表格内容筛选功能实例解析
2016/05/09 Javascript
详解js中的apply与call的用法
2016/07/30 Javascript
NodeJS使用七牛云存储上传文件的方法
2017/07/24 NodeJs
jQuery插件artDialog.js使用与关闭方法示例
2017/10/09 jQuery
JS实现点击链接切换显示隐藏内容的方法
2017/10/19 Javascript
vue实现裁切图片同时实现放大、缩小、旋转功能
2018/03/02 Javascript
angular实现input输入监听的示例
2018/08/31 Javascript
Vue 中获取当前时间并实时刷新的实现代码
2020/05/12 Javascript
基于Vue sessionStorage实现保留搜索框搜索内容
2020/06/01 Javascript
[19:59]2014DOTA2国际邀请赛 IG战队纪录片
2014/08/07 DOTA
Python中暂存上传图片的方法
2015/02/18 Python
收藏整理的一些Python常用方法和技巧
2015/05/18 Python
Python实现获取域名所用服务器的真实IP
2015/10/25 Python
举例讲解Python编程中对线程锁的使用
2016/07/12 Python
Tensorflow简单验证码识别应用
2017/05/25 Python
Python 关于反射和类的特殊成员方法
2017/09/14 Python
Pycharm在创建py文件时,自动添加文件头注释的实例
2018/05/07 Python
Python增强赋值和共享引用注意事项小结
2019/05/28 Python
python如何求圆的面积
2020/07/01 Python
CSS3制作圆角图片和椭圆形图片
2016/07/08 HTML / CSS
css3一个简易的 LED 数字时钟实现方法
2020/01/15 HTML / CSS
KIKO MILANO荷兰网上商店:意大利专业化妆品品牌
2017/05/12 全球购物
《一个小村庄的故事》教学反思
2014/04/13 职场文书
十八大演讲稿
2014/05/22 职场文书
音乐兴趣小组活动总结
2014/07/07 职场文书
人民检察院起诉书
2015/05/20 职场文书
小学生读书笔记范文
2015/06/30 职场文书
Django实现聊天机器人
2021/05/31 Python