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 相关文章推荐
jquery 打开窗口返回值实现代码
Mar 04 Javascript
js 获取后台的字段 改变 checkbox的被选中的状态 代码
Jun 05 Javascript
JavaScript实现打开链接页面的方式汇总
Jun 02 Javascript
利用jquery实现瀑布流3种案例
Sep 18 Javascript
vue实现可增删查改的成绩单
Oct 27 Javascript
Angular实现的简单定时器功能示例
Dec 28 Javascript
cropper js基于vue的图片裁剪上传功能的实现代码
Mar 01 Javascript
详解基于mpvue的小程序markdown适配解决方案
May 08 Javascript
JavaScript面向对象继承原理与实现方法分析
Aug 09 Javascript
使用layui 的layedit定义自己的toolbar方法
Sep 18 Javascript
js滚轮事件 js自定义滚动条的实现
Jan 18 Javascript
JS实现手风琴特效
Nov 08 Javascript
可拖拽组件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
Mysql的GROUP_CONCAT()函数使用方法
2008/03/28 PHP
PHP获取网卡地址的代码
2008/04/09 PHP
用PHP书写安全的脚本代码
2012/02/05 PHP
在Ubuntu 18.04上安装PHP 7.3 7.2和7.0的方法
2019/04/09 PHP
javascript 设置文本框中焦点的位置
2009/11/20 Javascript
关于Aptana Studio生成自动备份文件的解决办法
2009/12/23 Javascript
JavaScript初学者需要了解10个小技巧
2010/08/25 Javascript
window.location的重写及判断location是否被重写
2014/09/04 Javascript
JS+CSS简单树形菜单实现方法
2015/09/12 Javascript
require.js 加载 vue组件 r.js 合并压缩的实例
2016/10/14 Javascript
JS实现页面跳转参数不丢失的方法
2016/11/28 Javascript
JavaScript之Canvas_动力节点Java学院整理
2017/07/04 Javascript
用nodejs实现json和jsonp服务的方法
2017/08/25 NodeJs
JS+canvas绘制的动态机械表动画效果
2017/09/12 Javascript
CheckBox多选取值及判断CheckBox选中是否为空的实例
2017/10/31 Javascript
JS中移除非数字最多保留一位小数
2018/05/09 Javascript
JavaScript的级联函数用法简单示例【链式调用】
2019/03/26 Javascript
vue子路由跳转实现tab选项卡
2019/07/24 Javascript
DWR内存兼容及无法调用问题解决方案
2020/10/16 Javascript
10分钟学会js处理json的常用方法
2020/12/06 Javascript
让python同时兼容python2和python3的8个技巧分享
2014/07/11 Python
python中Apriori算法实现讲解
2017/12/10 Python
Pytorch中的variable, tensor与numpy相互转化的方法
2019/10/10 Python
Pytorch实现各种2d卷积示例
2019/12/30 Python
python 爬虫 实现增量去重和定时爬取实例
2020/02/28 Python
python如何发送带有附件、正文为HTML的邮件
2021/02/27 Python
五分钟学会HTML5的WebSocket协议
2019/11/22 HTML / CSS
Brother加拿大官网:打印机、贴标机、缝纫机
2019/10/09 全球购物
聚网科技C++面试笔试题
2015/09/01 面试题
个人求职信范文分享
2014/01/06 职场文书
篝火晚会策划方案
2014/05/16 职场文书
企业承诺书怎么写
2014/05/24 职场文书
新生开学寄语大全
2015/05/28 职场文书
高中同学会致辞
2015/08/01 职场文书
2019年个人工作总结范文(3篇)
2019/08/27 职场文书
你知道Java Spring的两种事务吗
2022/03/16 Java/Android