Html 弹出层自定义提示信息

最新推荐文章于 2023-06-17 10:10:13 发布

代码界的小学生

最新推荐文章于 2023-06-17 10:10:13 发布

阅读量5.5k

点赞数

分类专栏： HTML 经验文章标签： HTML 经验

本文链接：https://blog.csdn.net/qq_26625037/article/details/52472652

版权

经验同时被 2 个专栏收录

15 篇文章 0 订阅

订阅专栏

HTML

6 篇文章 0 订阅

订阅专栏

写一个弹出层显示提示信息，好处多多。。。。

1.属性:

display:none;//是一个Div层不显示
position:fixed;left:0px;top:0px;//将一个层固定在页面某个位置
border-radius: 6px;//圆角边框

2.代码:

<style>
input:focus {
	border: 1px solid #2468a2;
}

.btn {
	width: 100px;
	height: 30px;
	border-radius: 6px;
	border-color: #787878;
	background-color: #AAAAAA;
	margin-top: 10px;
}
</style>
<script type="text/javascript">
	//监听按钮状态
	function radiusButtonListener(id) {
		for (var i = 1; i <= 3; i++) {
			document.getElementById("radiusBtn" + i).style.backgroundColor = "#AAAAAA";
			document.getElementById("radiusBtn" + i).style.width = "100px";
		}
		document.getElementById("radiusBtn" + id).style.backgroundColor = "transparent";
		document.getElementById("radiusBtn" + id).style.width = "120px";

	}
	function radiusButton(obj) {//按钮响应
		show(obj);
	}
	//输出信息
	function show(mes) {
		document.getElementById("hid").style.display = "";//显示弹出层
		document.getElementById("text").innerHTML = mes;//设置信息内容
		setTimeout(function() {
			document.getElementById("hid").style.display = "none";//关闭弹出层
		}, 2000);
	}
</script>
<body>
	<br>
	<br>
	<br>
	<br>
	<div style="height: 150px; ">
		<!-- 三个测试按钮 -->
		<input id="radiusBtn1" type="button" class="btn" value="一个Button"
			οnclick="radiusButtonListener(1);radiusButton(this.value);"></br>
		<input id="radiusBtn2" type="button" class="btn" value="一个弹出层"
			οnclick="radiusButtonListener(2);radiusButton(this.value);">
		</br> <input id="radiusBtn3" type="button" class="btn" value="一行文字"
			οnclick="radiusButtonListener(3);radiusButton(this.value);">
	</div>
	<!-- 弹出层-->
	<div id="hid" align="center"
		style="position:fixed;left:10px;top:250px;border-radius: 6px;width:200px;height: 30px;background-color: #7A7A7A;display:none;line-height:30px;color:white;">
		<!-- 弹出信息 -->
		<span id="text" ></span>
	</div>
</body>