js实现弹窗提示信息

做网站过程中常常用到弹窗提醒，如果用普通的alert弹窗用户体验较差，所以需要自己用div来写一个好看点的弹窗界面，让用户可以多重选择。这里我们就来用简单的js和html代码实现一个弹窗功能。

演示效果

<span id="xsts" style="padding:8px 20px;color:#fff;background-color:#82c92f;border:solid 1px #82c92f;" onclick="opentc();">显示提示</span>

<div id="tcts" style="width:600px;background-color:#fff;border:solid 1px #82c92f;height:auto;margin:10% auto;display:none;">
<div style="width:100%;background-color:#82c92f;height:45px;">
<span style="float:left;padding:10px 20px;color:#fff;">
温馨提示
</span>
<span style="float:right;padding:10px 20px;color:#fff;" onclick="closetc();">
关闭
</span>
</div>
<div style="width:80%;margin:45px auto;text-align: center;">
<span style="color:#333;">
人生天地之间，若白驹之过隙，忽然而已。
</span>
</div>
<div style="width:50%;margin:45px auto;">
<a style="padding:8px 20px;color:#fff;background-color:#82c92f;text-decoration:none;" href="#">
注册会员
</a>
<a style="padding:8px 20px;color:#fff;background-color:#82c92f;text-decoration:none;margin-left:80px;" href="#">
联系客服
</a>
</div>
</div>

<script>
function opentc(){
document.getElementById("tcts").style.display="block";
}
function closetc(){
document.getElementById('tcts').style.display = 'none'
}
</script>

如果你也遇到了类似的问题，就试试上面的方法吧。