欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2022-03-10 15:27:01
js代码:window.alert = function(msg, callback) {var div = document.createelement("div");div.innerhtml =...

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事件内容请搜索以前的文章或继续浏览下面的相关文章希望大家以后多多支持!

相关标签: js 重写 alert