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 相关文章推荐
xml文档转换工具,附图表例子(hta)
Nov 17 Javascript
改变文件域的样式实现思路同时兼容ie、firefox
Oct 23 Javascript
网页防止tab键的使用快速解决方法
Nov 07 Javascript
js获取某元素的class里面的css属性值代码
Jan 16 Javascript
javascript-解决mongoose数据查询的异步操作
Dec 22 Javascript
使用Bootstrap美化按钮实例代码(demo)
Feb 03 Javascript
使用jQuery ajaxupload插件实现无刷新上传文件
Apr 23 jQuery
react-native中ListView组件点击跳转的方法示例
Sep 30 Javascript
使用vue + less 实现简单换肤功能的示例
Feb 21 Javascript
javascriptvoid(0)含义以及与&quot;#&quot;的区别讲解
Jan 19 Javascript
深入理解es6块级作用域的使用
Mar 28 Javascript
微信小程序拖拽排序列表的示例代码
Jul 08 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
ThinkPHP访问不存在的模块跳转到404页面的方法
2014/06/19 PHP
PHP处理Json字符串解码返回NULL的解决方法
2014/09/01 PHP
Laravel 5框架学习之路由、控制器和视图简介
2015/04/07 PHP
使用PHP如何实现高效安全的ftp服务器(二)
2015/12/30 PHP
thinkPHP的表达式查询用法详解
2016/09/14 PHP
浅谈PHP中关于foreach使用引用变量的坑
2016/11/14 PHP
PHP精确计算功能示例
2016/11/29 PHP
php查找字符串中第一个非0的位置截取
2017/02/27 PHP
jqGrid日期格式的判断示例代码(开始日期与结束日期)
2013/11/08 Javascript
JQuery调用WebServices的方法和4个实例
2014/05/06 Javascript
Javascript获取CSS伪元素属性的实现代码
2014/09/28 Javascript
JavaScript中函数(Function)的apply与call理解
2015/07/08 Javascript
javascript绘制漂亮的心型线效果完整实例
2016/02/02 Javascript
jquery.validate表单验证插件使用方法解析
2016/11/07 Javascript
JS异步文件分片断点上传的实现思路
2016/12/25 Javascript
bootstrap 下拉多选框进行多选传值问题代码分析
2017/02/14 Javascript
详解Angular 4 表单快速入门
2017/06/05 Javascript
js使用xml数据载体实现城市省份二级联动效果
2017/11/08 Javascript
vue使用$emit时,父组件无法监听到子组件的事件实例
2018/02/26 Javascript
Element-ui tree组件自定义节点使用方法代码详解
2018/09/17 Javascript
jsonp跨域获取百度联想词的方法分析
2019/05/13 Javascript
JS操作字符串转数字的常见方法示例
2019/10/29 Javascript
Python实现简单的获取图片爬虫功能示例
2017/07/12 Python
Python MySQLdb 使用utf-8 编码插入中文数据问题
2018/03/13 Python
快速解决pyqt5窗体关闭后子线程不同时退出的问题
2019/06/19 Python
Python安装及Pycharm安装使用教程图解
2019/09/20 Python
Django 实现外键去除自动添加的后缀‘_id’
2019/11/15 Python
Python datetime 格式化 明天,昨天实例
2020/03/02 Python
怎么快速自学python
2020/06/22 Python
比较一下entity bean和session bean
2013/12/27 面试题
数控技术专科生自我评价
2014/01/08 职场文书
刚毕业大学生自荐信范文
2014/02/20 职场文书
《去年的树》教学反思
2014/04/11 职场文书
国际金融专业自荐信
2014/07/05 职场文书
检讨书格式范文
2015/05/07 职场文书
源码安装apache脚本部署过程详解
2022/09/23 Servers