jquery automatically closes after popping up

In web pages, jquery is a widely used javascript library that can easily achieve various interactions and animation effects. Among them, pop-up boxes are a common interaction method, which can guide users to perform operations or prompt users with relevant information. Under normal circumstances, pop-up boxes need to be closed manually, but in some scenarios, we need to achieve the automatic closing effect. This article will introduce how to use jquery to realize the automatic closing function of pop-up boxes.

1. Basic implementation of the pop-up box

In jquery, we can use the pop-up box plug-in or write our own code to achieve the effect of the pop-up box. Here we take the way of writing code by ourselves as an example to simply achieve the effect of a pop-up box.

HTML code

<button id="btn">点击弹出框</button>

<div class="mask">
  <div class="popup">
    <h3>弹出框标题</h3>
    <p>弹出框内容</p>
    <button class="close-btn">关闭</button>
  </div>
</div>

CSS code

.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;
}

JS code

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

With the above code, we can achieve a simple pop-up box effect. Click the button, a black translucent background will appear on the page and a white frame will pop up. Click the close button, and the pop-up frame will disappear. Next, we will introduce how to implement the automatic closing function of the pop-up box.

2. Use setTimeout to achieve automatic shutdown

In jquery, there is a setTimeout method that can automatically execute the code after a specified time. Using this method, we can realize the function of automatically closing the pop-up box.

HTML code (same as the code above)

CSS code (same as the code above)

JS code

$(function() {
  $('#btn').click(function() {
    $('.mask').fadeIn(500);

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

In the above code, After the pop-up box is displayed (mask element fadeIn), we set the timer and put the automatic closing code into the timer, where 1500 means that the automatic closing code will be executed after 1.5 seconds (mask element fadeOut). Of course, we can also set the time longer or shorter to meet different needs.

3. Use animation animation to achieve automatic closing

In addition to using the setTimeout method to achieve automatic closing, we can also use jquery animation effects to achieve similar effects. We can use jquery's animate method to gradually disappear the pop-up box, thereby achieving an effect similar to automatic closing.

HTML code (same as the code above)

CSS code (same as the code above)

JS code

$(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);
  });
})

In the above code, We also set a timer so that the pop-up box starts to disappear after 1.5 seconds. The disappearance here is not to use the fadeOut method directly, but to use the animate method to gradually change the opacity (transparency) attribute from 1 to 0. When the transparency becomes 0, the callback function is called to hide the mask element. This completes an effect similar to automatic shutdown.

Summary

This article introduces how to use jquery to realize the automatic closing function of the pop-up box. We can use the setTimeout method or the animate method to achieve the automatic closing effect. Hope this article is helpful to everyone.

The above is the detailed content of jquery automatically closes after popping up. For more information, please follow other related articles on the PHP Chinese website!