jquery가 팝업 후 자동으로 닫힙니다.

웹페이지에서 jquery는 다양한 상호작용과 애니메이션 효과를 쉽게 얻을 수 있는 널리 사용되는 자바스크립트 라이브러리입니다. 그 중 팝업 상자는 사용자에게 작업 수행을 안내하거나 사용자에게 관련 정보를 제공하는 일반적인 상호 작용 방법입니다. 일반적인 상황에서는 팝업 상자를 수동으로 닫아야 하지만 일부 시나리오에서는 자동 닫기 효과를 구현해야 합니다. 이 기사에서는 jquery를 사용하여 팝업 상자 자동 닫기 기능을 구현하는 방법을 소개합니다.

1. 팝업 상자의 기본 구현

jquery에서는 팝업 상자 플러그인을 사용하거나 직접 코드를 작성하여 팝업 상자 효과를 얻을 수 있습니다. 여기서는 단순히 팝업 상자 효과를 얻기 위해 직접 코드를 작성하는 방법을 예로 들어보겠습니다.

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

위 코드를 사용하면 간단한 팝업 상자 효과를 얻을 수 있습니다. 버튼을 클릭하면 검은색 반투명 ​​배경이 페이지에 나타나고 흰색 프레임이 팝업됩니다. 닫기 버튼을 클릭하면 팝업 프레임이 사라집니다. 다음으로 팝업박스 자동 닫기 기능을 구현하는 방법을 소개하겠습니다.

2. 자동 종료를 위해 setTimeout을 사용하세요

jquery에는 지정된 시간 이후에 코드가 자동으로 실행되도록 할 수 있는 setTimeout 메서드가 있습니다. 이 방법을 사용하면 팝업 상자를 자동으로 닫는 기능을 구현할 수 있습니다.

HTML 코드 (위 코드와 동일)

CSS 코드 (위 코드와 동일)

JS 코드

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

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

위 코드에서는 팝업 상자가 표시된 후 타이머를 설정했습니다(마스크 요소 fadeIn ), 타이머에 자동 종료 코드를 입력합니다. 여기서 1500은 자동 종료 코드가 1.5초 후에 실행된다는 의미입니다(마스크 요소 fadeOut). 물론, 다양한 요구 사항을 충족하기 위해 시간을 더 길거나 짧게 설정할 수도 있습니다.

3. 애니메이션 애니메이션을 사용하여 자동 종료

setTimeout 메서드를 사용하여 자동 종료를 구현하는 것 외에도 jquery 애니메이션 효과를 사용하여 유사한 효과를 얻을 수도 있습니다. jquery의 animate 메서드를 사용하여 팝업 상자를 점차적으로 사라지게 하면 자동으로 닫히는 것과 유사한 효과를 얻을 수 있습니다.

HTML 코드(위 코드와 동일)

CSS 코드(위 코드와 동일)

JS 코드

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

위 코드에서도 타이머도 설정해 놓았더니 팝업창이 사라지기 시작합니다. 1.5초 후. 여기서 사라지는 것은 fadeOut 메소드를 직접 사용하는 것이 아니라 animate 메소드를 사용하여 opacity(투명도) 속성을 1에서 0으로 점진적으로 변경한다는 것입니다. 투명도가 0이 되면 콜백 함수가 호출되어 마스크 요소를 숨깁니다. 이는 자동 종료와 유사한 효과를 완성합니다.

요약

이 글에서는 jquery를 사용하여 팝업 상자 자동 닫기 기능을 구현하는 방법을 소개합니다. 자동 종료 효과를 얻기 위해 setTimeout 메소드나 animate 메소드를 사용할 수 있습니다. 이 기사가 모든 사람에게 도움이 되기를 바랍니다.

위 내용은 jquery가 팝업 후 자동으로 닫힙니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!