js弹窗提醒后自动关闭弹窗实现方法

js弹窗提醒经常会在做网页的时候用到，今天来说说js弹窗提醒后怎么自动关闭弹窗实现方法。

正常弹窗提醒，我们都会用alert();来实现，但是alert();弹窗的缺陷就是无法自动关闭，所以这里我们需要自己做一个弹窗。举例：我们现在来做一个复制网页文本，就弹窗提示复制成功，并2秒后自动关闭弹窗的效果。

首先看下面的弹窗代码：

<div style="width:150px;height:50px;background-color:#0a85ccad;position: absolute;bottom: 40%;margin: 0 auto;left: 0;right: 0;text-align:center;display:none;" id="message" >
<span style="font-size:1rem;color:#ffffff;line-height:50px;">复制成功！</span>
</div>

弹窗实际效果如下：

然后我们这里要做的效果是，复制textarea里的内容后就会弹出复制成功，并在2秒后关闭弹窗。看下面完整代码：

/*文本框部分*/
<textarea id="thebody" rows="22" onmouseover="this.focus()" oncopy="copy()"></textarea>




/*弹窗部分*/
<div style="width:150px;height:50px;background-color:#0a85ccad;position: absolute;bottom: 40%;margin: 0 auto;left: 0;right: 0;text-align:center;display:none;" id="message" >
<span style="font-size:1rem;color:#ffffff;line-height:50px;">复制成功！</span>
</div>



/*JS部分*/
<script>
    function copy() {
        document.getElementById('message').style.display='';   //复制后弹出
 setTimeout("document.getElementById('message').style.display='none'",2000);  //2秒后自动隐藏
}
</script>

通过以上代码就可以实现复制成功之后，弹出复制成功提醒，2秒后自动关闭提醒弹窗了。