轻松DIY弹出框！jQuery插件VS手写代码，速度之快令人惊叹

一、弹出框的基本实现

弹窗是网页设计中的热门元素，为啥？因为不仅能引起注意，还能引导我们或告知我们什么信息。像那个很牛的jQuery JavaScript库就能帮助我们轻松搞定这个效果。利用它，你可以立刻套用现成插件，当然也可以自己动手敲代码，随意定制一个弹出窗口瞧瞧。赶紧行动起来，参考借鉴一下，试试能不能DIY出一个弹出窗口！

这段HTML神奇？一按就能看见个按钮跟个框子，再加上给力的CSS帮衬下，变得更加美观。这俩一拍即合，只需轻戳一下按钮，就能在磨砂黑底色上展现出白框；关掉按钮，框子瞬间无影无踪，感觉就像是没存在过一样（速度之快）！

二、使用setTimeout实现自动关闭

点击弹出框

  

    
弹出框标题
    
弹出框内容
    关闭
  

想要弹出窗口自动关闭? jQuery里面的setTimeout帮到你!这个神奇的小功能可以根据你设定的时间自行干活儿。就跟以前看到的那种小弹窗一样，演示完毕后，定个小闹钟，稍微等等它就会自动不见！

要让弹窗出现又消失，其实简单得很！只要把mask元素变得稍微透明些，再弄个计时器陪在边上，大概1500毫秒(也就是1.5秒吧)之后，这玩意儿不就自动没了~这样的话，当你点了弹出框后，过段时间这个小窗口就能自动关掉了！

.mask {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.6)
}
.popup {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 300px;
  padding: 20px;
  background-color: #ffffff;
  border-radius: 5px;
  text-align: center;
}
.close-btn {
  margin-top: 20px;
  padding: 5px 10px;
  border: none;
  background-color: #ff6700;
  color: #ffffff;
  border-radius: 5px;
  cursor: pointer;
}

三、使用animation动画实现自动关闭

$(function() {
  $('#btn').click(function() {
    $('.mask').fadeIn(500);
  });
  
  $('.close-btn').click(function() {
    $('.mask').fadeOut(500);
  });
})

你造吗？不需要setTimeout也能用 jQuery 的动画功能快速做个东西自个儿消失！比如咱们用animate这个小方法，把它属性调的慢慢变，最后看不到就行！

咱们首先要准备好已经写好的那些HTML和CSS代码。然后，加上一个计时器，让弹窗在1.5秒后慢慢消失。怎么做到？其实很简单，用animate方法来调节透明度属性（opacity）就行了。先让它从1变为0，透明度为0时，再通过回调函数把mask元素藏起来，这样就大功告成！现在这个自动关闭的动画肯定没问题了！

跟着教程学一下怎样用jQuery控制弹窗自动消失吧!加上TeleTimeout和Animation这两个强大的小伙伴，随心所欲地开合窗口，让你的操控更加得心应手！

四、其他自动关闭方式

$(function() {
  $('#btn').click(function() {
    $('.mask').fadeIn(500);
    // 代码开始执行后，1.5秒后执行自动关闭
    setTimeout(function() {
      $('.mask').fadeOut(500);
    }, 1500);
  });
  
  $('.close-btn').click(function() {
    $('.mask').fadeOut(500);
  });
})

别只会用sleep（setTimeout）和动画还有别的办法能让弹窗自然消失！比如说，CSS3里那个transition属性，或者用jQuery的相关插件也行。

找代码里自动关闭的方法超关键~其实只要把setTimeout添个时间就OK。想搞帅气点？那就试试看animation或高科技！

五、注意事项及优化建议

解决弹窗不停消失这事儿很简单，牢记3招儿就可以。一开始先定个恰当的显示时间，让大家有足够时间看提示但别浪费太多；接着，别忘了用户的意见，让他们也可以手动关闭窗口；最后千万不能忽视兼容性测试和性能优化，这样才能确保不管用什么浏览器都能运行超快且网页加载不受影响！

为大家畅快玩儿，滑屏越滑越顺畅，我们这弹框功能可得提升下！比如让它开合流畅些，字体小点儿，有需要自取，这样刷网页不就快多！

六、总结

$(function() {
  $('#btn').click(function() {
    $('.mask').fadeIn(500);
    // 延迟1.5秒后开始执行动画
    setTimeout(function() {
      $('.popup').animate({opacity: 0});
      $('.mask').animate({opacity: 0}, function() {
        $(this).hide();
      })
    }, 1500);
  });
  
  $('.close-btn').click(function() {
    $('.mask').fadeOut(500);
  });
})

今天告诉大家一个超实用的 jQuery 小技巧，就是让弹窗自动消失。用好 setTimeout 和 animation，网页瞬间变得更强大了。特别是用户体验，简直太赞了，使网页更加有趣。

大家来聊聊：网上买东西时，有没有遇到过自动弹窗把页面关了的情况？你们觉得哪个关闭窗口的方法最实用？快来分享！

原文链接：https://www.icz.com/technicalinformation/web/javascript/2024/04/15074.html，转载请注明出处~~~