重写原生alert,弹出层过一会就消失
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,弹出层过一会就消失的更多相关文章
- zepto弹出层组件
html: <!DOCTYPE html> <html> <meta charset="utf-8"> <title></ti ...
- 简单 JS 弹出层 背景变暗
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- layer弹出层框架alert与msg详解
ayer至今仍作为layui的代表作,她的受众广泛并非偶然,而是这五年多的坚持,不断完善和维护.不断建设和提升社区服务,使得猿们纷纷自发传播,乃至于成为今天的Layui最强劲的源动力.目前,layer ...
- 效果非常好的 Jquery弹出层插件 jQuery Sweet alert
介绍款交互性非常不错的jquery弹出层插件,支持消息提示.错误提示.确认框提示等. 交互式体验感非常不错,比如咱们现在体验非常不错的微信支付.支付宝等完成后的效果. 不过本插件至少支持IE9+ Jq ...
- (三)原生JS实现 - 插件 - 弹出层
创建遮罩层 _createCover: function() { var newMask = document.createElement("div"); newMask.id = ...
- 点击图片或者鼠标放上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 ...
- 页面DIV弹出层 JS原生脚本
<script type="text/javascript"> /* * 弹出DIV层 */ function showDiv() { ...
- JavaScript学习笔记(一)——延迟对象、跨域、模板引擎、弹出层、AJAX示例
一.AJAX示例 AJAX全称为“Asynchronous JavaScript And XML”(异步JavaScript和XML) 是指一种创建交互式网页应用的开发技术.改善用户体验,实现无刷新效 ...
- JavaScript学习总结(一)——延迟对象、跨域、模板引擎、弹出层、AJAX示例
一.AJAX示例 AJAX全称为“Asynchronous JavaScript And XML”(异步JavaScript和XML) 是指一种创建交互式网页应用的开发技术.改善用户体验,实现无刷新效 ...
随机推荐
- angularjs 信息链接 转摘自:http://www.zhihu.com/question/27427447
这个问题嘛,真不好回答,问的太笼统了,其实你只要熟悉掌握了Angular.js,自然而然的就会用Angular.js结合自身的业务去构建SPA程序了,Angular.js是一个比较全面的框架,按照他的 ...
- C#面试 笔试题 三
1.传入某个属性的set方法的隐含参数的名称是什么? value,它的类型和属性所声名的类型相同. 2.C#支持多重继承么? 类之间不支持,接口之间支持.类对接口叫做实现,不叫继承. 3.C#中所 ...
- Word里的红色、绿色和蓝色波浪线
有时候我们写完文章会发现,有的地方有红色波浪线,有的地方有绿色/蓝色二重线,那么这两种线各代表什么意思呢?其实红色波浪线代表此处存在拼写错误,绿色/蓝色波浪线代表此处可能有语法错误.如果你不希望Wor ...
- Codeforces Round #554 (Div. 2) C.Neko does Maths (gcd的运用)
题目链接:https://codeforces.com/contest/1152/problem/C 题目大意:给定两个正整数a,b,其中(1<=a,b<=1e9),求一个正整数k(0&l ...
- HTML 地理定位 的实例
<!DOCTYPE html> <html lang="en"> <head> <title>地理定位</title> ...
- Python3.5-20190503-廖老师-自我笔记
列表和元组 list1 = [1,4,6,788,345,757] tuple1 = (345,234,567,878) 切记你的变量名不能和 hel ...
- python3访问MySQL数据库
import pymysql db = pymysql.connect( host='XXXXXXXX.com', #数据库服务器地址 user='XXX', #用户名 passwd='XXX', d ...
- springboot 操作redis
redis五大类型用法 Redis五大类型:字符串(String).哈希/散列/字典(Hash).列表(List).集合(Set).有序集合(sorted set)五种Controller:@Reso ...
- 【leetcode】1019. Next Greater Node In Linked List
题目如下: We are given a linked list with head as the first node. Let's number the nodes in the list: n ...
- 如何通过Dataphin构建数据中台新增100万用户?
欢迎来到数据中台小讲堂!这一期我们来看看,作为阿里巴巴数据中台(OneData - OneModel.OneID.OneService)方法论的产品载体,Dataphin如何帮助传统零售企业实现数字化 ...