2019独角兽企业重金招聘Python工程师标准>>>

如何更改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;};
}

效果如图

转载于:https://my.oschina.net/u/2001537/blog/489054

修改 javascript 中alert样式相关推荐

  1. javascript中alert函数的替代方案,一个自定义的对话框的方法(引用)

    大家好,我们平时在使用Javascript的时候,经常会需要给用户提供一些反馈信息,完成这个功能有很多种方法.但在平时开发中我们用的最多的可能就是alert这个函数了(这里只说一般情况,不排除个别高手 ...

  2. javascript中alert函数的替代方案,一个自定义的对话框的方法

    大家好,我们平时在使用Javascript的时候,经常会需要给用户提供一些反馈信息,完成这个功能有很多种方法.但在平时开发中我们用的最多的可能就是alert这个函数了(这里只说一般情况,不排除个别高手 ...

  3. wpf修改theme中的样式_WPF Mahapps.Metro 设置主题样式

    /// /// 设置App样式 /// /// 窗口标题栏样式 /// 背景样式 private void ChangeTheme(string accentName, string themeNam ...

  4. 修改bootstrap 中 CSS 样式表,以实现自己需要的部分样式。

    bootstrap当中,已经自动配置好许多CSS 样式,但是,咱们可以根据自己的需要来修改相应的部分内容,实现自己想要的结果. 目前,尼玛哥在web前端开发的过程当中, 使用到了bootstrap框架 ...

  5. CSS修改iframe内的样式问题

    如何在iframe外控制iframe中的css? <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ...

  6. C#保留2位小数几种场景总结 游标遍历所有数据库循环执行修改数据库的sql命令 原生js轮盘抽奖实例分析(幸运大转盘抽奖) javascript中的typeof和类型判断...

    C#保留2位小数几种场景总结 场景1: C#保留2位小数,.ToString("f2")确实可以,但是如果这个数字本来就小数点后面三位比如1.253,那么转化之后就会变成1.25. ...

  7. php js怎么去掉类属性,如何修改DOM中的属性,类和样式

    通过jQuery来获取要修改的DOM元素,然后通过JavaScript中方法来对属性.类以及样式进行修改 今天在本篇文章中将分享的是如何通过修改html元素节点的样式,类和属性来进一步的更改dom,, ...

  8. [译] JavaScript 中的 CSS:基于组件的样式的未来

    本文讲的是[译] JavaScript 中的 CSS:基于组件的样式的未来, 原文地址:CSS in JavaScript: The future of component-based styling ...

  9. js获取html元素并且修改属性,JavaScript中获取和修改元素属性的值

    在上一篇关于<JavaScript中几个操作元素对象的函数方法>文章中记录了分别通过元素的ID属性,元素的标签名,Class类名来获取元素的节点对象. 今天记录两个函数可以用来获取和修改获 ...

最新文章

  1. MySQL 数据库常用命令—where like union 排序 分组 连接
  2. tomcat下类加载顺序
  3. vue从入门到精通之进阶篇(三)axios
  4. [渝粤教育] 广东-国家-开放大学 21秋期末考试工程经济10202k2
  5. 亲和数 杭电2040
  6. 读excel_基础 | Excel中单元格的引用方式,读这篇就够了!
  7. 面试题(用栈代替队列的操作和原生map实现)
  8. 互联网项目管理流程(SOP)总结
  9. od找数据 遇到dll_OriginPro:最近比较烦,被360盯上了【数据绘图】
  10. 另一个flutter-go
  11. 报错:Ticket expired while renewing credentials 原因:Hue 集成Kerberos 导致Kerberos Ticket Renewer 起不来
  12. spark sql 对接 HDFS
  13. python贪心算法
  14. MySQL 5.7.32-winx64安装教程(支持一台主机安装多个MySQL服务)
  15. PTA 乙级 【1005】继续(3n+1)猜想
  16. CCRC信息安全服务资质--风险评估申请
  17. 微信聊天记录删除了怎么恢复?通过这几种方法可以找回
  18. opc ua 用哪种语言编写_OPC UA是个什么东东
  19. 互斥锁(mutex)的使用
  20. wps office 2010 Wps文字文档保存及自动保存方法介绍

热门文章

  1. linux重装系统u盘启动不了怎么办,U盘安装Linux开机无法启动解决方法
  2. java重装机兵机甲咆哮_重装机兵之机甲咆哮流程攻略
  3. 了解 Diffing 算法
  4. 覆盖索引与联合索引_Mysql性能优化:为什么要用覆盖索引?
  5. Vue父组件向子组件传值
  6. 2020计算机大纲,计算机专业2020考试大纲.doc
  7. 上海计算机应用基础自考上机,上海2012年自考《计算机应用基础》上机考核大纲...
  8. 20190915:(leetcode习题)对称二叉树
  9. combobox总结
  10. android SDK安装以及环境变量配置