js自定义信息提示框

最新推荐文章于 2024-04-19 10:18:52 发布

红尘残雪

最新推荐文章于 2024-04-19 10:18:52 发布

阅读量1.3k

点赞数

分类专栏： js公共方法文章标签： javascript 前端

本文链接：https://blog.csdn.net/weixin_38353615/article/details/125446815

版权

js公共方法专栏收录该内容

4 篇文章 0 订阅

订阅专栏

代码：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
</head>
<body>
	<button type="button" onclick="promptBox('信息提示和三个完全好人都不齐微积分军阀割据风格鞍山钢铁v奋斗成果哈斯v电话噶三个')">提示</button>
	<script>
		/**提示框
		 * @param {string} con：提示信息
		 * @param {boolean} sx：是否需要刷新页面
		 */
		function promptBox(con, sx = false) {
			var db = document;
			var w = window;
			if (w.parent != undefined) {
				db = w.parent.document;
			}
			var box = document.createElement("div");
			db.body.appendChild(box);
			box.style = "position: fixed;left:0;right:0;top:0;bottom:0;z-index:200;";
			var div = document.createElement("div");
			box.appendChild(div);
			div.style =
				"width:500px;height:200px;padding:10px;border-radius:5px;background-color: #fff;box-shadow: 2px 0 2px #666 , -2px 0 2px #666,0 2px 2px #666,0 -2px 2px #666;position: absolute;top:50%;margin-top:-100px;left:50%;margin-left:-250px;";
			var h2 = document.createElement("h2");
			h2.innerHTML = "提示信息";
			h2.style = "line-height:40px;height:40px;font-size:20px;text-align:center;border-bottom:1px solid #ccc;margin:0;";
			div.appendChild(h2);
			var condiv = document.createElement("div");
			condiv.innerHTML = con;
			condiv.style =
				"line-height:24px;font-size:16px;border-bottom:1px solid #ccc;text-indent: 2rem;padding:5px;height:95px;";
			div.appendChild(condiv);
			var btn = document.createElement("div");
			div.appendChild(btn);
			btn.style = "text-align:right;padding:5px;height:45px;";
			btn.innerHTML = `<button>确定</button>`;
			var qd = btn.children[0];
			qd.onclick = function () {		
				db.body.removeChild(box);
				if (sx) {
					w.location.reload();
		        }
			}
		}
	</script>
</body>
</html>