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

桃扇骨 2024-02-21 09:08 35阅读 0赞

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

#### HTML部分： ####

<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;
    	}

效果：

![469e0070a9df4c3c9d5878f17bf5ec09.png][]

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

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

#### js代码： ####

#### 总代码： ####

<!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>
    		
    		<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>

#### 最终效果： ####

![cb53eeb1a3dc430b93e8710d5f13e0a8.png][]

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

![d959607929d14ce48d90f067c7cc7038.png][]

> 注：当提示框处于隐藏状态时，它是不占位置的，如上图，当显示出来后，就回占位置，其他内容自动向下扩去，解决该问题可以用position属性来设置。
> 
> 2、提示语句样式并没有设置设置宽高，其会根据内容自动填充，若提示语句太长，可能导致内容溢出。解决方法：用overflow属性来隐藏溢出内容或者设置滚动条。

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

[469e0070a9df4c3c9d5878f17bf5ec09.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/21/11081de4d08b4f39a0e67240da94cf73.png
[cb53eeb1a3dc430b93e8710d5f13e0a8.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/21/3663773058744057972e0e394e012d95.png
[d959607929d14ce48d90f067c7cc7038.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/21/b10efa2bbbee43959b8ed09cd2b78769.png