window.alert = function(str) {
if(document.querySelectorAll("div.shieldClass").length!=0){
return false;
}
// 遮罩层
var shield = document.createElement("DIV");
shield.className = "shieldClass";
shield.id = "shield";
shield.style.position = "absolute";
shield.style.left = "0px";
shield.style.top = "0px";
shield.style.width = "100%";
shield.style.height = "100%";
//弹出对话框时的背景颜色
shield.style.background = "#111";
shield.style.textAlign = "center";
shield.style.zIndex = "25000";
shield.style.opacity = "0.4";
//背景透明 IE有效
var alertFram = document.createElement("DIV");
alertFram.className = "alertFramClass";
alertFram.id = "alertFram";
alertFram.style.position = "absolute";
alertFram.style.left = "50%";
alertFram.style.top = "40%";
alertFram.style.background = "rgba(0,0,0,0.7)";
alertFram.style.textAlign = "center";
alertFram.style.zIndex = "25001";
alertFram.style.borderRadius="6px";
strHtml = "<p style='text-align:center;padding:15px 15px;font-size:12px;font-weight: normal;color:#fff'>" + str +"</p>"
alertFram.innerHTML = strHtml;
document.body.appendChild(alertFram);
document.body.appendChild(shield);
var o = document.getElementById("alertFram");
var body=document.getElementsByTagName("body")[0]
var w = o.offsetWidth; //宽度
o.style.marginLeft="-"+w/2+"px";
setTimeout(function(){
var shieldDom=document.querySelectorAll("div.shieldClass");
var alertFramDom=document.querySelectorAll("div.alertFramClass");
for(var i=0;i<shieldDom.length;i++){
body.removeChild(shieldDom[i]);
};
for(var j=0;j<alertFramDom.length;j++){
body.removeChild(alertFramDom[j]);
};
},1000); }

重写原生alert,弹出层过一会就消失的更多相关文章

  1. zepto弹出层组件

    html: <!DOCTYPE html> <html> <meta charset="utf-8"> <title></ti ...

  2. 简单 JS 弹出层 背景变暗

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  3. layer弹出层框架alert与msg详解

    ayer至今仍作为layui的代表作,她的受众广泛并非偶然,而是这五年多的坚持,不断完善和维护.不断建设和提升社区服务,使得猿们纷纷自发传播,乃至于成为今天的Layui最强劲的源动力.目前,layer ...

  4. 效果非常好的 Jquery弹出层插件 jQuery Sweet alert

    介绍款交互性非常不错的jquery弹出层插件,支持消息提示.错误提示.确认框提示等. 交互式体验感非常不错,比如咱们现在体验非常不错的微信支付.支付宝等完成后的效果. 不过本插件至少支持IE9+ Jq ...

  5. (三)原生JS实现 - 插件 - 弹出层

    创建遮罩层 _createCover: function() { var newMask = document.createElement("div"); newMask.id = ...

  6. 点击图片或者鼠标放上hover .图片变大. 1)可以使用css中的transition, transform 2) 预先设置一个 弹出div. 3)弹出层 alert ; 4) 浏览器的宽度document.documentElement.clientWidth || document.body.clientWidth

    变大: 方法一: 利用css属性. 鼠标放上 hover放大几倍. .kecheng_02_cell_content img { /*width: 100px; height: 133px;*/ wi ...

  7. 页面DIV弹出层 JS原生脚本

    <script type="text/javascript"> /*         * 弹出DIV层         */ function showDiv() { ...

  8. JavaScript学习笔记(一)——延迟对象、跨域、模板引擎、弹出层、AJAX示例

    一.AJAX示例 AJAX全称为“Asynchronous JavaScript And XML”(异步JavaScript和XML) 是指一种创建交互式网页应用的开发技术.改善用户体验,实现无刷新效 ...

  9. JavaScript学习总结(一)——延迟对象、跨域、模板引擎、弹出层、AJAX示例

    一.AJAX示例 AJAX全称为“Asynchronous JavaScript And XML”(异步JavaScript和XML) 是指一种创建交互式网页应用的开发技术.改善用户体验,实现无刷新效 ...

随机推荐

  1. JS的video在手机上有些手机能播放,而有些不能原因

    一,一开始我video是这样写的,直接给地址,然后有很多手机却不能播放,或者说卡在一开始的页面,是什么原因呢? <video id='video' > <source src='xx ...

  2. kafaka环境搭建

    激动无比,终于成功搭建了一套集群的kafka,记录下我的搭建步骤,供大家参考,如有不对,请指正: 1.集群搭建 首先搭建一个一主三从(或一主两从)的集群, 2.配置jdk环境 需要是jdk8的包 我的 ...

  3. elasticsearch 深入 —— Post Filter后置过滤器

    过滤查询以及聚合 A natural extension to aggregation scoping is filtering. Because the aggregation operates i ...

  4. docker-compose启动报错:Creating network "soft_default" with the default driver ERROR: cannot create network e5b60fc347db868e471b61ea185fd24e3ea7e2730149d91ad70baf29732aaff0 (br-e5b60fc347db): conflicts wi

    docker-compose启动容器时出现报错 Creating network "soft_default" with the default driver ERROR: can ...

  5. POJ 3237 树链剖分

    题目链接:http://poj.org/problem?id=3237 题意:给定一棵n个结点n-1条边的树. 每条边都是一个边权. 现在有4种操作 1:CHANGE I V:把(输入的)第i条边的边 ...

  6. (HY000): Can't connect to MySQL server on '129.28.149.240' (113)

    环境 mysql5.7 ubuntu 一. 解决方法 1.首先确保mysql开启了远程授权:https://blog.csdn.net/cryhelyxx/article/details/401146 ...

  7. 前端每日实战:67# 视频演示如何用纯 CSS 创作单元素点阵 loader

    效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览.https://codepen.io/comehope/pen/YvBvBr 可交互视频 此视频是可以 ...

  8. shell编程之基础知识1

    1.shell脚本的基本格式 #!bin/bash   ->看到这个就是shell脚本 #filename:test.sh ->脚本名称 #auto echo hello world -& ...

  9. postman自动化接口测试

    背景描述 有一个项目要使用postman进行接口测试,接口所需参数有: appid: 应用标识: sign:请求签名,需要使用HMACSHA1加密算法计算,签名串是:{appid}${url}${st ...

  10. Echarts和Highcharts学习笔记01——入门了解

      Echarts是国内百度团队开发的(开源),基于Canvas,适合数据量较大的情况: Highcharts是国外的(商用需授权),基于SVG,方便自己定制,但能使用的图表类型有限: Echarts ...