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 相关文章推荐
Json对象替换字符串占位符实现代码
Nov 17 Javascript
Jquery实现select multiple左右添加和删除功能的简单实例
May 26 Javascript
Ajax跨域实现代码(后台jsp)
Jan 21 Javascript
用vue和node写的简易购物车实现
Apr 25 Javascript
基于JavaScript实现多级菜单效果
Jul 25 Javascript
深入理解React高阶组件
Sep 28 Javascript
10行原生JS实现文字无缝滚动(超简单)
Jan 02 Javascript
Node.js中读取TXT文件内容fs.readFile()用法
Oct 10 Javascript
关于微信小程序map组件z-index的层级问题分析
Jul 09 Javascript
浅谈TypeScript 用 Webpack/ts-node 运行的配置记录
Oct 11 Javascript
Element Badge标记的使用方法
Jul 27 Javascript
JavaScript流程控制(循环)
Dec 06 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
Discuz! Passport 通行证整合
2008/03/27 PHP
php 提速工具eAccelerator 配置参数详解
2010/05/16 PHP
浅谈php正则表达式中的非贪婪模式匹配的使用
2014/11/25 PHP
PHP严重致命错误处理:php Fatal error: Cannot redeclare class or function
2017/02/05 PHP
PHP区块查询实现方法分析
2018/05/12 PHP
JS 文字符串转换unicode编码函数
2009/05/30 Javascript
jQuery实现用户注册的表单验证示例
2013/08/28 Javascript
指定区域的图片自动按比例缩小的js代码(防止页面被图片撑破)
2014/02/21 Javascript
js获取当前地址 JS获取当前URL的示例代码
2014/02/26 Javascript
jQuery实现异步获取json数据的2种方式
2014/08/29 Javascript
浅谈Javascript的静态属性和原型属性
2015/05/07 Javascript
实例讲解JS中setTimeout()的用法
2016/01/28 Javascript
深入理解ECMAScript的几个关键语句
2016/06/01 Javascript
Node+Express+MongoDB实现登录注册功能实例
2017/04/23 Javascript
利用JS对iframe父子(内外)页面进行操作的方法教程
2017/06/15 Javascript
vue.js中ref及$refs的使用方法解析
2019/10/08 Javascript
vue-cli在 history模式下的配置详解
2019/11/26 Javascript
[54:53]完美世界DOTA2联赛PWL S2 GXR vs PXG 第二场 11.18
2020/11/18 DOTA
Python实现windows下模拟按键和鼠标点击的方法
2015/03/13 Python
python轻松查到删除自己的微信好友
2016/01/10 Python
Python 多线程Threading初学教程
2017/08/22 Python
python中subprocess批量执行linux命令
2018/04/27 Python
Python闭包及装饰器运行原理解析
2020/06/17 Python
实例教程 HTML5 Canvas 超炫酷烟花绽放动画实现代码
2014/11/05 HTML / CSS
英国泽西岛植物:Jersey Plants Direct
2019/08/07 全球购物
应用化学专业职业生涯规划书
2013/12/31 职场文书
学生操行评语大全
2014/04/24 职场文书
优秀的应届生自荐信
2014/05/23 职场文书
拓展训练激励口号
2014/06/17 职场文书
踏青活动策划方案
2014/08/19 职场文书
2014年保险业务员工作总结
2014/12/23 职场文书
全陪导游词
2015/02/04 职场文书
硕士毕业答辩开场白
2015/05/27 职场文书
学校运动会简讯
2015/07/20 职场文书
JavaScript 原型与原型链详情
2021/11/02 Javascript
SQL优化老出错,那是你没弄明白MySQL解释计划用法
2021/11/27 MySQL