您的当前位置：首页正文

使用HTML和js设置一个简单的提示框，在同一个提示框中，点击不同的按钮，提示不同的内容：

来源：哗拓教育

思路：先设置一个提示框，同过js中的innerHtml和单击事件onclick来实现：

HTML部分：

<!-- 设置一个提示框tsk，提示语句tsy和确认按钮 -->
		<div id="tsk">  
			<p id="tsy">设置提示语</p>
			<button id="qr">确认</button>
		</div>
			<button id="sc" >收藏</button>
			<button id="dl" >登录</button>

这里通过点击收藏和登录来实现不同的提示效果。

Css样式：


#tsk{
			border: 1px solid black;
			width: 200px;
			height: 100px;
			margin: auto;
			background-color: aqua;
			border-radius: 30px;
			text-align: center;
			display: none;
	}

效果：

在将提示框样式设置好之后，先将该提示框通过display：none：属性将它隐藏起来，可以在单击事件时再将它显示。

这里我们使用js单击事件，来改变登录框的display属性，用display：block 来将提示框显现出来。

js代码：

var qr=document.getElementById("qr");  //提示框中的确认按钮
				var tsk=document.getElementById("tsk");  //提示框
				var tsy=document.getElementById("tsy"); //提示语
				var sc=document.getElementById("sc");  //收藏
				var dl=document.getElementById("dl");  //登录
				sc.onclick=function(){  //单击收藏
						tsk.style.display="block";  //将提示框显现出来
						tsy.innerHTML="收藏成功";  //改变提示语中的内容，相当于替换掉原来的内容
				}
				dl.onclick=function(){  //单击登录
					tsk.style.display="block";
					tsy.innerHTML="登录成功";
				}
				// 当提示框出现后,点击确认时，回用display再次将提示框隐藏
				qr.onclick=function(){
					tsk.style.display="none";
				}

总代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			#tsk{
				border: 1px solid black;
				width: 200px;
				height: 100px;
				margin: auto;
				background-color: aqua;
				border-radius: 30px;
				text-align: center;
				display: none;
			}
		</style>
	</head>
	<body>
		<!-- 设置一个提示框tsk，提示语句tsy和确认按钮 -->
		<div id="tsk">  
			<p id="tsy">设置提示语</p>
			<button id="qr">确认</button>
		</div>
			<button id="sc" >收藏</button>
			<button id="dl" >登录</button>
		<script>
				var qr=document.getElementById("qr");  //提示框中的确认按钮
				var tsk=document.getElementById("tsk");  //提示框
				var tsy=document.getElementById("tsy"); //提示语
				var sc=document.getElementById("sc");  //收藏
				var dl=document.getElementById("dl");  //登录
				sc.onclick=function(){  //单击收藏
						tsk.style.display="block";  //将提示框显现出来
						tsy.innerHTML="收藏成功";  //改变提示语中的内容，相当于替换掉原来的内容
				}
				dl.onclick=function(){  //单击登录
					tsk.style.display="block";
					tsy.innerHTML="登录成功";
				}
				// 当提示框出现后,点击确认时，回用display再次将提示框隐藏
				qr.onclick=function(){
					tsk.style.display="none";
				}
		</script>
	</body>
</html>

最终效果：

当单击收藏时，提示“收藏成功”，点击提示框中的确认，回到隐藏状态。登录同理。

当然提示框中很少会出现提示内容太多的情况，只需设置好提示框的大小就好了。

因篇幅问题不能全部显示，请点此查看更多更全内容

查看全文