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两种跨域技术全面介绍
Apr 16 Javascript
禁止iframe页面的所有js脚本如alert及弹出窗口等
Sep 03 Javascript
JavaScript设计模式之外观模式实例
Oct 10 Javascript
javascript中Math.random()使用详解
Apr 15 Javascript
jQuery Ajax和getJSON获取后台普通json数据和层级json数据用法分析
Jun 08 Javascript
源码分析Vue.js的监听实现教程
Apr 23 Javascript
vue使用axios跨域请求数据问题详解
Oct 18 Javascript
详解vue-cli 2.0配置文件(小结)
Jan 14 Javascript
基于vue如何发布一个npm包的方法步骤
May 15 Javascript
一文看懂如何简单实现节流函数和防抖函数
Sep 05 Javascript
微信小程序实现星级评价
Nov 20 Javascript
Vue的过滤器你真了解吗
Feb 24 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
可以在线执行PHP代码包装修正版
2008/03/15 PHP
在Windows系统上安装PHP运行环境文字教程
2010/07/19 PHP
PHP查询快递信息的方法
2015/03/07 PHP
PHP二分查找算法示例【递归与非递归方法】
2016/09/29 PHP
PHP通过GD库实现验证码功能示例
2019/02/23 PHP
可恶的ie8提示缺少id未定义
2014/03/20 Javascript
javascript进行数组追加方法小结
2014/06/16 Javascript
windows8.1+iis8.5下安装node.js开发环境
2014/12/12 Javascript
JQuery中DOM加载与事件执行实例分析
2015/06/13 Javascript
JQuery中DOM事件合成用法实例分析
2015/06/13 Javascript
网页中JS函数自动执行常用三种方法
2016/03/30 Javascript
js代码实现下拉菜单【推荐】
2016/12/15 Javascript
bootstrap css样式之表单
2017/01/19 Javascript
AngularJS监听路由变化的方法
2017/03/07 Javascript
vue项目部署上线遇到的问题及解决方法
2018/06/10 Javascript
NodeJS模块与ES6模块系统语法及注意点详解
2019/01/04 NodeJs
js笔试题-接收get请求参数
2019/06/15 Javascript
使用Webpack提升Vue.js应用程序的4种方法(翻译)
2019/10/09 Javascript
使用vue重构资讯页面的实例代码解析
2019/11/26 Javascript
小程序自定义圆形进度条
2020/11/17 Javascript
[04:42]5分钟带你了解什么是DOTA2(第一期)
2017/02/07 DOTA
Python创建日历实例
2014/08/21 Python
Python中获取网页状态码的两个方法
2014/11/03 Python
python获取指定目录下所有文件名列表的方法
2015/05/20 Python
解决python3 pika之连接断开的问题
2018/12/18 Python
python3 实现调用串口功能
2019/12/26 Python
Windows下实现将Pascal VOC转化为TFRecords
2020/02/17 Python
通过代码实例解析Pytest运行流程
2020/08/20 Python
Pycharm 跳转回之前所在页面的操作
2021/02/05 Python
html5实现的便签特效(实战分享)
2013/11/29 HTML / CSS
Canvas globalCompositeOperation
2018/12/18 HTML / CSS
ebookers英国:隶属全球最大的在线旅游公司Expedia
2017/12/28 全球购物
Shopee越南:东南亚与台湾电商平台
2019/02/03 全球购物
Hashtable 添加内容的方式有哪几种,有什么区别?
2012/04/08 面试题
我的中国梦演讲稿1000字
2014/08/19 职场文书
2014年销售部工作总结
2014/12/01 职场文书