重写alert弹窗
时间:2020-01-18
本文章向大家介绍重写alert弹窗,主要包括重写alert弹窗使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
效果图:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>重写alert弹窗</title> </head> <body> <script> // window.alert = alert; // function alert(data) { // var parent_div = document.createElement("div"), // title_p = document.createElement("p"), // name_p = document.createElement("p"), // time_p = document.createElement("p"), // title_text = document.createTextNode(data ? "执行状态:"+data : ""), // name_text = document.createTextNode(data ? "操作人:"+data : ""), // time_text = document.createTextNode(data ? "操作时间:"+data : ""), // btn_div = document.createElement("div"), // btnText = document.createTextNode("确定"); // // 控制样式 // css(parent_div, { // "position" : "fixed", // "left" : "70%", // "right" : "0", // "top" : "20%", // "width" : "15%", // "margin" : "0 auto", // "background-color" : "#ffffff", // "font-size" : "20px", // "text-align" : "center", // "border":"1px solid darkcyan" // }); // css(btn_div, { // "background" : "#00b8ff", // }) // // 内部结构套入 // title_p.appendChild(title_text); // name_p.appendChild(name_text); // time_p.appendChild(time_text); // btn_div.appendChild(btnText); // parent_div.appendChild(title_p); // parent_div.appendChild(name_p); // parent_div.appendChild(time_p); // parent_div.appendChild(btn_div); // // 整体显示到页面内 // document.getElementsByTagName("body")[0].appendChild(parent_div); // // 确定绑定点击事件删除标签 // btn_div.onclick = function() { // parent_div.parentNode.removeChild(parent_div); // } // //自动清除 // setTimeout(function(){ // parent_div.parentNode.removeChild(parent_div); // },2000); // } // function css(targetObj, cssObj) { // var str = targetObj.getAttribute("style") ? targetObj.getAttribute("style") : ""; // for(var i in cssObj) { // str += i + ":" + cssObj[i] + ";"; // } // targetObj.style.cssText = str; // } // alert(123); ////右弹窗/// function right_alert(data) { var parent_div = document.createElement("div"), title_p = document.createElement("p"), name_p = document.createElement("p"), time_p = document.createElement("p"), // title_text = document.createTextNode(data ? "执行状态:" + data.LifeLinkChildName : ""), // name_text = document.createTextNode(data ? "操作人:" + data.AuditUserName : ""), // time_text = document.createTextNode(data ? "操作时间:" + data.AuditDate.substring(0,19).replace("T"," "): ""), title_text = document.createTextNode(data ? "执行状态:" + data : ""), name_text = document.createTextNode(data ? "操作人:" + data : ""), time_text = document.createTextNode(data ? "操作时间:" + data : ""), btn_div = document.createElement("div"), btnText = document.createTextNode("确定"); // 控制样式 css(parent_div, { "padding-top": "21px", "position": "fixed", "left": "70%", "right": "0", "top": "25%", "width": "19%", "margin": "0 auto", "background-color": "#ffffff", "font-size": "20px", "text-align": "center", "border": "10px outset #a3b1b1" }); css(btn_div, { "background": "#00b8ff", }) // 内部结构套入 title_p.appendChild(title_text); name_p.appendChild(name_text); time_p.appendChild(time_text); btn_div.appendChild(btnText); parent_div.appendChild(title_p); parent_div.appendChild(name_p); parent_div.appendChild(time_p); parent_div.appendChild(btn_div); // 整体显示到页面内 document.getElementsByTagName("body")[0].appendChild(parent_div); // 确定绑定点击事件删除标签 btn_div.onclick = function () { parent_div.parentNode.removeChild(parent_div); } //自动清除 setTimeout(function () { parent_div.parentNode.removeChild(parent_div); }, 2000); }; function css(targetObj, cssObj) { var str = targetObj.getAttribute("style") ? targetObj.getAttribute("style") : ""; for (var i in cssObj) { str += i + ":" + cssObj[i] + ";"; } targetObj.style.cssText = str; } right_alert(123) </script> </body> </html>
原文地址:https://www.cnblogs.com/YCiCi/p/12209648.html
- 厚土Go学习笔记 | 22. 实现Pic
- ie8和chrome获取上传图片的宽度和高度等尺寸
- 厚土Go学习笔记 | 21. range用法
- Golang Stub初体验
- 厚土Go学习笔记 | 20. slice 继续
- 数据挖掘算法之深入朴素贝叶斯分类
- 歪?我想要一个XXE。
- 厚土Go学习笔记 | 19. slice和数组很像,但是slice可以添加元素
- 工具| 手把手教你制作信息收集器之网站备案号
- 厚土Go学习笔记 | 18. 数组
- 厚土Go学习笔记 | 17. 结构体及用指针访问结构体
- Java枚举类型的原理
- 厚土Go学习笔记 | 27. 斐波纳契闭包
- 代码审计| APPCMS SQL-XSS-CSRF-SHELL
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法