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 16 Javascript
javascript获得CheckBoxList选中的数量
Oct 27 Javascript
深入理解JavaScript系列(2) 揭秘命名函数表达式
Jan 15 Javascript
JS上传图片前的限制包括(jpg jpg gif及大小高宽)等
Dec 19 Javascript
jQuery跨域问题解决方案
Aug 03 Javascript
简单实现限制uploadify上传个数
Nov 16 Javascript
解析AngularJS中get请求URL出现的跨域问题
Dec 01 Javascript
Bootstrap CSS组件之分页(pagination)和翻页(pager)
Dec 17 Javascript
angularjs实现的前端分页控件示例
Feb 10 Javascript
Angular 2父子组件数据传递之@Input和@Output详解(下)
Jul 05 Javascript
基于Nuxt.js项目的服务端性能优化与错误检测(容错处理)
Oct 23 Javascript
JQuery发送ajax请求时中文乱码问题解决
Nov 14 jQuery
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/11/06 PHP
PHP常用处理静态操作类
2015/04/03 PHP
Zend Framework实现多服务器共享SESSION数据的方法
2016/03/22 PHP
用javascript获取textarea中的光标位置
2008/05/06 Javascript
javascript arguments 传递给函数的隐含参数
2009/08/21 Javascript
不使用中间变量,交换int型的 a, b两个变量的值。
2010/10/29 Javascript
JavaScript使用slice函数获取数组部分元素的方法
2015/04/06 Javascript
jQuery超精致图片轮播幻灯片特效代码分享
2015/09/10 Javascript
JS利用cookie记忆当前位置的防刷新导航效果
2015/10/15 Javascript
JavaScript获取IP获取的是IPV6 如何校验
2016/06/12 Javascript
浅谈jquery.form.js的ajaxSubmit和ajaxForm的使用
2016/09/09 Javascript
jQuery属性选择器用法示例
2016/09/09 Javascript
jQuery实现背景滑动菜单
2016/12/02 Javascript
JS判断指定dom元素是否在屏幕内的方法实例
2017/01/23 Javascript
bootstrap datetimepicker控件位置异常的解决方法
2017/11/23 Javascript
JS实现网页抢购功能(触发,终止脚本)
2017/11/27 Javascript
jquery.pagination.js分页使用教程
2018/10/23 jQuery
vue-cli3自动消除console.log()的调试信息方式
2020/10/21 Javascript
[00:38]TI珍贵瞬间系列(二):笑
2020/08/26 DOTA
Python中的日期时间处理详解
2016/11/17 Python
python flask实现分页效果
2017/06/27 Python
解决python读取几千万行的大表内存问题
2018/06/26 Python
在python tkinter界面中添加按钮的实例
2020/03/04 Python
pycharm 2018 激活码及破解补丁激活方式
2020/09/21 Python
python3用PyPDF2解析pdf文件,用正则匹配数据方式
2020/05/12 Python
使用Keras实现Tensor的相乘和相加代码
2020/06/18 Python
如何启动时不需输入用户名与密码
2014/05/09 面试题
string = null 和string = ''的区别
2013/04/28 面试题
优质的学校老师推荐信
2013/10/28 职场文书
病媒生物防治方案
2014/05/13 职场文书
自愿离婚协议书2015
2015/01/26 职场文书
2015纪念九一八事变84周年演讲稿
2015/03/19 职场文书
新生儿未入户证明
2015/06/23 职场文书
教师研修随笔感言
2015/11/18 职场文书
vue3不同环境下实现配置代理
2022/05/25 Vue.js
解决spring.thymeleaf.cache=false不起作用的问题
2022/06/10 Java/Android