js重写alert事件(避免alert弹框标题出现网址)


Posted in Javascript onDecember 04, 2020

js代码:

window.alert = function(msg, callback) {
	var div = document.createElement("div");
	div.innerHTML = "<style type=\"text/css\">"
			+ ".nbaMask { position: fixed; z-index: 1000; top: 0; right: 0; left: 0; bottom: 0; background: rgba(0, 0, 0, 0.5); }                                          "
			+ ".nbaMaskTransparent { position: fixed; z-index: 1000; top: 0; right: 0; left: 0; bottom: 0; }                                               "
			+ ".nbaDialog { position: fixed; z-index: 5000; width: 80%; max-width: 300px; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); background-color: #fff; text-align: center; border-radius: 8px; overflow: hidden; opacity: 1; color: white; }"
			+ ".nbaDialog .nbaDialogHd { padding: .2rem .27rem .08rem .27rem; }                                                       "
			+ ".nbaDialog .nbaDialogHd .nbaDialogTitle { font-size: 17px; font-weight: 400; }                                                   "
			+ ".nbaDialog .nbaDialogBd { padding: 0 .27rem; font-size: 15px; line-height: 1.3; word-wrap: break-word; word-break: break-all; color: #000000; }                                   "
			+ ".nbaDialog .nbaDialogFt { position: relative; line-height: 48px; font-size: 17px; display: -webkit-box; display: -webkit-flex; display: flex; }                                   "
			+ ".nbaDialog .nbaDialogFt:after { content: \" \"; position: absolute; left: 0; top: 0; right: 0; height: 1px; border-top: 1px solid #e6e6e6; color: #e6e6e6; -webkit-transform-origin: 0 0; transform-origin: 0 0; -webkit-transform: scaleY(0.5); transform: scaleY(0.5); }    "
			+ ".nbaDialog .nbaDialogBtn { display: block; -webkit-box-flex: 1; -webkit-flex: 1; flex: 1; color: #09BB07; text-decoration: none; -webkit-tap-highlight-color: transparent; position: relative; margin-bottom: 0; }                  "
			+ ".nbaDialog .nbaDialogBtn:after { content: \" \"; position: absolute; left: 0; top: 0; width: 1px; bottom: 0; border-left: 1px solid #e6e6e6; color: #e6e6e6; -webkit-transform-origin: 0 0; transform-origin: 0 0; -webkit-transform: scaleX(0.5); transform: scaleX(0.5); }    "
			+ ".nbaDialog a { text-decoration: none; -webkit-tap-highlight-color: transparent; }"
			+ "</style>"
			+ "<div id=\"dialogs2\" style=\"display: none\">"
			+ "<div class=\"nbaMask\"></div>"
			+ "<div class=\"nbaDialog\">"
			+ "	<div class=\"nbaDialogHd\">"
			+ "		<strong class=\"nbaDialogTitle\"></strong>"
			+ "	</div>"
			+ "	<div class=\"nbaDialogBd\" id=\"dialog_msg2\">弹窗内容,告知当前状态、信息和解决方法,描述文字尽量控制在三行内</div>"
			+ "	<div class=\"nbaDialogHd\">"
			+ "		<strong class=\"nbaDialogTitle\"></strong>"
			+ "	</div>"
			+ "	<div class=\"nbaDialogFt\">"
			+ "		<a href=\"javascript:;\" class=\"nbaDialogBtn nbaDialogBtnPrimary\" id=\"dialog_ok2\">确定</a>"
			+ "	</div></div></div>";
	document.body.appendChild(div);
 
	var dialogs2 = document.getElementById("dialogs2");
	dialogs2.style.display = 'block';
 
	var dialog_msg2 = document.getElementById("dialog_msg2");
	dialog_msg2.innerHTML = msg;
 
	// var dialog_cancel = document.getElementById("dialog_cancel");
	// dialog_cancel.onclick = function() {
	// dialogs2.style.display = 'none';
	// };
	var dialog_ok2 = document.getElementById("dialog_ok2");
	dialog_ok2.onclick = function() {
		dialogs2.style.display = 'none';
		callback();
	};
};

html引用:

<!DOCTYPE html>
<html>
<head>
<title>alert.html</title>
<meta charset="UTF-8">
<meta name="keywords" content="keyword1,keyword2,keyword3">
<meta name="description" content="this is my page">
<meta name="content-type" content="text/html; charset=UTF-8">
<!--<link rel="stylesheet" type="text/css" href="./styles.css" rel="external nofollow" >-->
 
</head>
<body>
 This is my HTML page.
 <br>
 <script type="text/javascript" src="alert.js"></script>
 <script type="text/javascript">
 alert("哈哈哈!!!看,没有标题~_~");
 </script>
</body>
</html>

总结

到此这篇关于js重写alert事件(避免alert弹框标题出现网址)的文章就介绍到这了,更多相关js重写alert事件内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
JS实现程序暂停与继续功能代码解读
Oct 10 Javascript
JS获取网页属性包括宽、高等等
Apr 03 Javascript
JS中使用Array函数shift和pop创建可忽略参数的例子
May 28 Javascript
JavaScript也谈内存优化
Jun 06 Javascript
js模仿java的Map集合详解
Jan 06 Javascript
利用JS对iframe父子(内外)页面进行操作的方法教程
Jun 15 Javascript
JS 60秒后重新发送验证码的实例讲解
Jul 26 Javascript
纯js实现页面返回顶部的动画(超简单)
Aug 10 Javascript
vue实现图片加载完成前的loading组件方法
Feb 05 Javascript
用原生 JS 实现 innerHTML 功能实例详解
Apr 03 Javascript
JavaScript实现简单的计算器
Jan 16 Javascript
Vue全局事件总线你了解吗
Feb 24 Vue.js
可拖拽组件slider.js使用方法详解
Dec 04 #Javascript
js实现复制粘贴的两种方法
Dec 04 #Javascript
echarts浮动显示单位的实现方法示例
Dec 04 #Javascript
JavaScript中条件语句的优化技巧总结
Dec 04 #Javascript
三剑客:offset、client和scroll还傻傻分不清?
Dec 04 #Javascript
简单谈谈offsetleft、offsetTop和offsetParent
Dec 04 #Javascript
HTML元素拖拽功能实现的完整实例
Dec 04 #Javascript
You might like
JAVA/JSP学习系列之七
2006/10/09 PHP
excellent!――ASCII Art(由目标图象生成ascii)
2007/02/20 PHP
php mysql数据库操作分页类
2008/06/04 PHP
Yii不依赖Model的表单生成器用法实例
2014/12/04 PHP
PHP的PDO常用类库实例分析
2016/04/07 PHP
JQuery打造PHP的AJAX表单提交实例
2009/11/03 Javascript
jQuery 版元素拖拽原型代码
2011/04/25 Javascript
JQUERY1.6 使用方法四 检测浏览器
2011/11/23 Javascript
解决3.01版的jquery.form.js中文乱码问题的解决方法
2012/03/08 Javascript
SinaEditor使用方法详解
2013/12/28 Javascript
js冒泡、捕获事件及阻止冒泡方法详细总结
2014/05/08 Javascript
javascript在IE下trim函数无法使用的解决方法
2014/09/12 Javascript
js jquery获取当前元素的兄弟级 上一个 下一个元素
2015/09/01 Javascript
封装属于自己的JS组件
2016/01/27 Javascript
jQuery中的一些常见方法小结(推荐)
2016/06/13 Javascript
JS路由跳转的简单实现代码
2017/09/21 Javascript
Js面试算法详解
2018/04/08 Javascript
关于AOP在JS中的实现与应用详解
2019/05/06 Javascript
javascript实现遮罩层动态效果实例
2019/05/14 Javascript
js模拟F11页面全屏显示
2019/09/17 Javascript
基于layui的table插件进行复选框联动功能的实现方法
2019/09/19 Javascript
[00:34]DOTA2上海特级锦标赛 Spirit战队宣传片
2016/03/04 DOTA
Python实现在线程里运行scrapy的方法
2015/04/07 Python
Python中用Decorator来简化元编程的教程
2015/04/13 Python
python如何生成网页验证码
2018/07/28 Python
python enumerate内置函数用法总结
2020/01/07 Python
Python如何绘制日历图和热力图
2020/08/07 Python
python实现跨年表白神器--你值得拥有
2021/01/04 Python
XD健身器材:Kevlar球、Crossfit健身球
2019/03/26 全球购物
电气技术员岗位职责
2013/11/19 职场文书
生物学学生自我评价
2014/01/17 职场文书
装修协议书范本
2014/04/21 职场文书
公司委托书格式范本
2014/09/16 职场文书
西安兵马俑导游词
2015/02/02 职场文书
2015教师个人工作总结范文
2015/03/31 职场文书
结婚幸福感言
2015/08/01 职场文书