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 相关文章推荐
jQuery中filter(),not(),split()使用方法
Jul 06 Javascript
javascript获取checkbox复选框获取选中的选项
Aug 12 Javascript
用原生js做个简单的滑动效果的回到顶部
Oct 15 Javascript
基于JavaScript实现快速转换文本语言(繁体中文和简体中文)
Mar 07 Javascript
深入浅析JSON.parse()、JSON.stringify()和eval()的作用详解
Apr 03 Javascript
AngularJs 动态加载模块和依赖
Sep 15 Javascript
AngularJS入门教程之Cookies读写操作示例
Nov 02 Javascript
socket.io学习教程之深入学习篇(三)
Apr 29 Javascript
Node.js 使用命令行工具检查更新
Jun 08 Javascript
基于VUE实现的九宫格抽奖功能
Sep 30 Javascript
JS实现判断数组是否包含某个元素示例
May 24 Javascript
Jquery+AJAX实现无刷新上传并重命名文件操作示例【PHP后台接收】
May 29 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中使用模板的方法
2008/05/24 PHP
php Rename 更改文件、文件夹名称
2011/05/24 PHP
PHP与MYSQL中UTF8编码的中文排序实例
2014/10/21 PHP
PHP利用百度ai实现文本和图片审核
2019/05/08 PHP
PHP生成随机密码4种方法及性能对比
2020/12/11 PHP
javascript编程起步(第五课)
2007/01/10 Javascript
推荐自用 Javascript 缩图函数 (onDOMLoaded)……
2007/10/23 Javascript
jquery keypress,keyup,onpropertychange键盘事件
2010/06/25 Javascript
JQuery通过Ajax提交表单并返回结果
2011/07/31 Javascript
结合JQ1.9通过js正则判断各种浏览器版本的方法
2013/12/30 Javascript
Javascript中的方法链(Method Chaining)介绍
2015/03/15 Javascript
JS实现的简单鼠标跟随DiV层效果完整实例
2015/10/31 Javascript
基于JavaScript实现移除(删除)数组中指定元素
2016/01/04 Javascript
Spring boot 和Vue开发中CORS跨域问题解决
2018/09/05 Javascript
原生js生成图片验证码
2020/10/11 Javascript
Python使用Flask框架同时上传多个文件的方法
2015/03/21 Python
初学Python函数的笔记整理
2015/04/07 Python
详解Python中类的定义与使用
2017/04/11 Python
Python数据分析之如何利用pandas查询数据示例代码
2017/09/01 Python
Python数据结构与算法之链表定义与用法实例详解【单链表、循环链表】
2017/09/28 Python
解读! Python在人工智能中的作用
2017/11/14 Python
利用Python写一个爬妹子的爬虫
2018/06/08 Python
python获取微信小程序手机号并绑定遇到的坑
2018/11/19 Python
我喜欢你 抖音表白程序python版
2019/04/07 Python
centos+nginx+uwsgi+Django实现IP+port访问服务器
2019/11/15 Python
去加拿大的旅行和假期:Canadian Affair
2016/10/25 全球购物
药品业务员岗位职责
2014/04/17 职场文书
大学竞选班长演讲稿
2014/04/24 职场文书
教室标语大全
2014/06/21 职场文书
个人四风问题对照检查材料
2014/09/26 职场文书
买卖合同协议书范本
2014/10/18 职场文书
2014年节能降耗工作总结
2014/12/11 职场文书
工作表现证明
2015/06/15 职场文书
导游词之阆中古城
2019/12/23 职场文书
告别网页搜索!教你用python实现一款属于自己的翻译词典软件
2021/06/03 Python
MySQL读取JSON转换的方式
2022/03/18 MySQL