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判读浏览器是否支持html5的canvas的代码
Nov 18 Javascript
当前流行的JavaScript代码风格指南
Sep 10 Javascript
CSS图片响应式 垂直水平居中
Aug 14 Javascript
JS实现的文字与图片定时切换效果代码
Oct 06 Javascript
微信小程序 九宫格实例代码
Jan 21 Javascript
js屏蔽退格键(backspace或者叫后退键与F5)
Feb 10 Javascript
js/jquery遍历对象和数组的方法分析【forEach,map与each方法】
Feb 27 jQuery
layer弹出框确定前验证:弹出消息框的方法(弹出两个layer)
Sep 21 Javascript
vue 清空input标签 中file的值操作
Jul 21 Javascript
vue路由的配置和页面切换详解
Sep 09 Javascript
react国际化react-intl的使用
May 06 Javascript
React配置子路由的实现
Jun 03 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
php绘图中显示不出图片的原因及解决
2014/03/05 PHP
Yii2中多表关联查询hasOne hasMany的方法
2017/02/15 PHP
详解Yii2 之 生成 URL 的方法
2017/06/16 PHP
PHP基于XMLWriter操作xml的方法分析
2017/07/17 PHP
php桥接模式应用案例分析
2019/10/23 PHP
jQuery $.each的用法说明
2010/03/22 Javascript
JQuery在光标位置插入内容的实现代码
2010/06/18 Javascript
bootstrap weebox 支持ajax的模态弹出框
2017/02/23 Javascript
Node.js调试技术总结分享
2017/03/12 Javascript
angularjs实现首页轮播图效果
2017/04/14 Javascript
基于vue-simplemde实现图片拖拽、粘贴功能
2018/04/12 Javascript
详解基于Vue cli生成的Vue项目的webpack4升级
2018/06/19 Javascript
Cocos2d实现刮刮卡效果
2018/12/20 Javascript
使用Sonarqube扫描Javascript代码的示例
2018/12/26 Javascript
bootstrap与pagehelper实现分页效果
2018/12/29 Javascript
[48:21]Mski vs VGJ.S Supermajor小组赛C组 BO3 第一场 6.3
2018/06/04 DOTA
Python中用Ctrl+C终止多线程程序的问题解决
2013/03/30 Python
python通过文件头判断文件类型
2015/10/30 Python
开源软件包和环境管理系统Anaconda的安装使用
2017/09/04 Python
python 实现登录网页的操作方法
2018/05/11 Python
python3 实现调用串口功能
2019/12/26 Python
python2.7使用scapy发送syn实例
2020/05/05 Python
Python 实现将numpy中的nan和inf,nan替换成对应的均值
2020/06/08 Python
keras做CNN的训练误差loss的下降操作
2020/06/22 Python
PyQt中使用QtSql连接MySql数据库的方法
2020/07/28 Python
python和node.js生成当前时间戳的示例
2020/09/29 Python
利用CSS3实现进度条的两种姿势详解
2017/03/21 HTML / CSS
AmazeUI 模态窗口的实现代码
2020/08/18 HTML / CSS
英国骑行、跑步、游泳、铁人三项运动装备专卖店:Wiggle
2016/08/23 全球购物
台湾团购、宅配和优惠券:17Life
2017/08/14 全球购物
Desigual德国官网:在线购买原创服装
2018/03/27 全球购物
巴西备受欢迎的服装和生活方式品牌:FARM Rio
2020/02/04 全球购物
高中军训感言500字
2014/02/24 职场文书
私用公车造成事故检讨书
2014/11/16 职场文书
工程项目合作意向书
2015/05/08 职场文书
Java数据结构之链表相关知识总结
2021/06/18 Java/Android