js的alert样式如何更改如背景颜色

 更新时间:2014年01月22日 16:46:18   作者:  
如何更改js的alert样式如:弹出对话框时的背景颜色、背景透明等等,下面有效果图,感兴趣的朋友可以学习下
复制代码 代码如下:

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中的forEach、$.each、map方法推荐

    JS中的forEach、$.each、map方法推荐

    下面小编就为大家带来一篇JS中的forEach、$.each、map方法推荐。小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-04-04
  • 微信小程序自定义弹出层效果

    微信小程序自定义弹出层效果

    这篇文章主要为大家详细介绍了微信小程序自定义弹出层效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-05-05
  • javascript 子窗体父窗体相互传值方法

    javascript 子窗体父窗体相互传值方法

    javascript 子窗体父窗体相互传值方法,一般都是用window.open函数,下面脚本之家给出具体的代码。
    2010-05-05
  • js中通过父级进行查找定位元素

    js中通过父级进行查找定位元素

    这篇文章主要介绍了js中如何通过父级进行查找定位元素,需要的朋友可以参考下
    2014-06-06
  • 键盘元素的控制小方块的移动效果

    键盘元素的控制小方块的移动效果

    键盘元素的控制小方块的移动效果...
    2007-01-01
  • 总结一些js自定义的函数

    总结一些js自定义的函数

    总结一些js自定义的函数...
    2006-08-08
  • 通俗解释JavaScript正则表达式快速记忆

    通俗解释JavaScript正则表达式快速记忆

    正则表达式使用单个字符串来描述、匹配一系列符合某个句法规则的字符串。简单来说,就是按照某种规则去匹配符合条件的字符串
    2017-08-08
  • JS中比较冷门但非常好用的方法总结

    JS中比较冷门但非常好用的方法总结

    在Js中有一些比较冷门但是非常好用的方法,我在这里称之为高级方法,这些方法没有被广泛使用或多或少是因为存在一些兼容性的问题,不是所有的浏览器都读得懂的,这篇文章主要就是对这些方法做一个总结,让我们一起来看一下吧
    2023-06-06
  • 详解ES6系列之私有变量的实现

    详解ES6系列之私有变量的实现

    这篇文章主要介绍了详解ES6系列之私有变量的实现,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-11-11
  • 教你巧用webpack在日志中记录文件行号

    教你巧用webpack在日志中记录文件行号

    早期webpack的目的是允许在浏览器中运行大多数node.js模块,但是模块整体格局发生了变化,现在许多模块的主要用途是以编写前端为目的,下面这篇文章主要给大家介绍了关于巧用webpack在日志中记录文件行号的相关资料,需要的朋友可以参考下
    2022-11-11

最新评论