思路:先设置一个提示框,同过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>
最终效果:
当单击收藏时,提示“收藏成功”,点击提示框中的确认,回到隐藏状态。登录同理。
注:当提示框处于隐藏状态时,它是不占位置的,如上图,当显示出来后,就回占位置,其他内容自动向下扩去,解决该问题可以用position属性来设置。
2、提示语句样式并没有设置设置宽高,其会根据内容自动填充,若提示语句太长,可能导致内容溢出。解决方法:用overflow属性来隐藏溢出内容或者设置滚动条。
当然提示框中很少会出现提示内容太多的情况,只需设置好提示框的大小就好了。