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 轻松支持函数重载 (Part 2 - 实现)
Aug 04 Javascript
JavaScript类和继承 constructor属性
Mar 04 Javascript
JS实现超简单的鼠标拖动效果
Nov 02 Javascript
理解JavaScript中Promise的使用
Jan 18 Javascript
angular2使用简单介绍
Mar 01 Javascript
JavaScript获取IP获取的是IPV6 如何校验
Jun 12 Javascript
浅谈JavaScript的计时器对象
Dec 26 Javascript
vue.js 双层嵌套for遍历的方法详解, 类似php foreach()
Sep 07 Javascript
基于mpvue的简单弹窗组件mptoast使用详解
Aug 02 Javascript
结合axios对项目中的api请求进行封装操作
Sep 21 Javascript
JavaScript实现表单验证功能
Dec 09 Javascript
uniapp开发打包多端应用完整方法指南
Dec 24 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
Zerg兵种介绍
2020/03/14 星际争霸
php array_intersect比array_diff快(附详细的使用说明)
2011/07/03 PHP
如何在symfony中导出为CSV文件中的数据
2011/10/06 PHP
获取PHP警告错误信息的解决方法
2013/06/03 PHP
简单的php新闻发布系统教程
2014/05/09 PHP
PHP中set error handler函数用法小结
2015/11/11 PHP
PHP中串行化用法示例
2016/11/16 PHP
php unicode编码和字符串互转的方法
2020/08/12 PHP
php 中的closure用法详解
2017/06/12 PHP
你知道setTimeout是如何运行的吗?
2016/08/16 Javascript
js模拟微博发布消息
2017/02/23 Javascript
Vue2.0使用过程常见的一些问题总结学习
2017/04/10 Javascript
使用javascript做在线算法编程
2018/05/25 Javascript
Angular6 Filter实现页面搜索的示例代码
2018/12/02 Javascript
jQuery实现带3D切割效果的轮播图功能示例【附源码下载】
2019/04/04 jQuery
vant-ui框架的一个bug(解决切换后onload不触发)
2020/11/11 Javascript
[52:32]完美世界DOTA2联赛PWL S2 Magma vs LBZS 第三场 11.18
2020/11/18 DOTA
python爬虫入门教程之点点美女图片爬虫代码分享
2014/09/02 Python
python网络编程实例简析
2014/09/26 Python
Python3中多线程编程的队列运作示例
2015/04/16 Python
python中as用法实例分析
2015/04/30 Python
Python基于traceback模块获取异常信息
2020/07/23 Python
python破解同事的压缩包密码
2020/10/14 Python
css3 图片圆形显示 如何CSS将正方形图片显示为圆形图片布局
2014/10/10 HTML / CSS
css3边框_动力节点Java学院整理
2017/07/11 HTML / CSS
HTML5学习笔记之html5与传统html区别
2016/01/06 HTML / CSS
Ajax和javascript的区别
2013/07/20 面试题
生产内勤岗位职责
2013/12/07 职场文书
前台接待员岗位职责
2014/01/02 职场文书
销售简历自我评价
2014/01/24 职场文书
交通事故委托书范本
2014/09/28 职场文书
2014年检验科工作总结
2014/11/22 职场文书
学习焦裕禄先进事迹心得体会
2016/01/23 职场文书
公司晚会主持词
2019/04/17 职场文书
如何利用map实现Nginx允许多个域名跨域
2021/03/31 Servers
Vue操作Storage本地化存储
2022/04/29 Vue.js