JS实现页面弹出提示框并定时自动关闭的方法及代码

来源：绵阳动力网络公司  时间：2020-07-13  阅读：10 次

在网站建设中信息提交后弹也提交成功的对话框，如果是用jQuery组件可以实现2秒钟后自动关闭对话框并跳转到新的页面中，而如果是用JS的话则需要点击对话框中的“确定”按钮后才能跳转到新的页面中。也许有人会说现在是jQuery的天下，直接用jQuery来实现就好了，但天下没有绝对的事情，有可能在你的项目开发中因为特殊需求，而要用JS，那JS能否实现这样的效果呢？答案是肯定的，今天绵阳动力网络公司就以评论页面的提示来为大家介绍用JS实现页面弹出提示框并定时自动关闭的方法和相关的代码：

首先是HTML代码：

{#评论成功提示#}
<div class="popup_con" style="display: none; margin-left: 300px">
    <div class="popup" >
        <p style="color: red; font-size: 16px">评论成功！</p>
    </div>
    <div class="mask"></div>
 </div>

接着是核心部分的JS代码：

// 评论成功提示定时器
 // 定一定时器函数
 function showSuccessMsg() {
   $('.popup_con').fadeIn('fast', function () {
     setTimeout(function () {
       $('.popup_con').fadeOut('fast', function () {
       });
     }, 2000)
   });
 }
 
 // 提交评论
 $("#form_comment").submit(function (event) {
   event.preventDefault();
   var comment = $('#comment').val();
   var data = {
     "comment": comment
   };
   $.ajax({
     url: "/task_mgm/taskinfo_comment=" + taskId,
     type: "POST",
     data: JSON.stringify(data),
     contentType: "application/json", // 传给后端的数据类型
     dataType: "json", // 接收后端的数据类型
     success: function (resp) {
       if (resp.error == 'OK') {
              showSuccessMsg();
              {#alert('评论成功');#}
              $('#comment').val(''); //清空评论框
            } else {
              alert('评论失败');
            }
          }
        })
      })

好了，通过以上两步就可以实现我们今天为大家介绍的JS实现页面弹出提示框并定时自动关闭的功能了，如果你觉得有用，请收藏它！