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 相关文章推荐
小型js框架veryide.librar源代码
Mar 05 Javascript
Jquery作者John Resig自己封装的javascript 常用函数
Nov 09 Javascript
Three.js源码阅读笔记(基础的核心Core对象)
Dec 27 Javascript
从零学JSON之JSON数据结构
May 19 Javascript
浅谈Javascript 数组与字典
Jan 29 Javascript
jquery 重写 ajax提交并判断权限后 使用load方法报错解决方法
Jan 19 Javascript
jQuery+CSS3文字跑马灯特效的简单实现
Jun 25 Javascript
jQuery实现滚动到底部时自动加载更多的方法示例
Feb 18 jQuery
用Node提供静态文件服务的方法
Jul 06 Javascript
简单了解vue.js数组的常用操作
Jun 17 Javascript
Vue使用vue-recoure + http-proxy-middleware + vuex配合promise实现基本的跨域请求封装
Oct 21 Javascript
vue 基于abstract 路由模式 实现页面内嵌的示例代码
Dec 14 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
通过ICQ网关发送手机短信的PHP源程序
2006/10/09 PHP
php绝对路径与相对路径之间关系的的分析
2010/03/03 PHP
使用PHP遍历文件夹与子目录的函数代码
2011/09/26 PHP
php中把美国时间转为北京时间的自定义函数分享
2014/07/28 PHP
PHP和MySql中32位和64位的整形范围是多少
2016/02/18 PHP
PHP使用mysql与mysqli连接Mysql数据库用法示例
2016/07/07 PHP
PHP基于面向对象封装的分页类示例
2019/03/15 PHP
锋利的jQuery 要点归纳(二) jQuery中的DOM操作(下)
2010/03/23 Javascript
基于JQuery的一个简单的鼠标跟随提示效果
2010/09/23 Javascript
jquery 多行文本框(textarea)高度变化
2013/07/03 Javascript
使用node.js半年来总结的 10 条经验
2014/08/18 Javascript
javascript事件委托的用法及其好处简析
2016/04/04 Javascript
AngularJS中一般函数参数传递用法分析
2016/11/22 Javascript
vue如何使用 Slot 分发内容实例详解
2017/09/05 Javascript
原生JS实现Ajax跨域请求flask响应内容
2017/10/24 Javascript
windows下更新npm和node的方法
2017/11/30 Javascript
实例分析JS与Node.js中的事件循环
2017/12/12 Javascript
vue组件实现弹出框点击显示隐藏效果
2020/10/26 Javascript
ES6中let 和 const 的新特性
2018/09/03 Javascript
微信小程序-可移动菜单的实现过程详解
2019/06/24 Javascript
javascript实现贪吃蛇经典游戏
2020/04/10 Javascript
夯基础之手撕javascript继承详解
2020/11/09 Javascript
Vuex实现简单购物车
2021/01/10 Vue.js
[57:16]2014 DOTA2华西杯精英邀请赛 5 25 LGD VS VG第二场
2014/05/26 DOTA
[01:04:31]DOTA2-DPC中国联赛定级赛 iG vs Magma BO3第二场 1月8日
2021/03/11 DOTA
Django与遗留的数据库整合的方法指南
2015/07/24 Python
Python获取暗黑破坏神3战网前1000命位玩家的英雄技能统计
2016/07/04 Python
Python实现Youku视频批量下载功能
2017/03/14 Python
Python连接phoenix的方法示例
2017/09/29 Python
python opencv 直方图反向投影的方法
2018/02/24 Python
Python实现OpenCV的安装与使用示例
2018/03/30 Python
Python坐标轴操作及设置代码实例
2020/06/04 Python
python3代码中实现加法重载的实例
2020/12/03 Python
高中运动会广播稿
2014/09/16 职场文书
六一文艺汇演开幕词
2015/01/29 职场文书
浅谈CSS不规则边框的生成方案
2021/05/25 HTML / CSS