> 웹 프론트엔드 > 프런트엔드 Q&A > 자바스크립트 취소 팝업 상자

자바스크립트 취소 팝업 상자

王林
풀어 주다: 2023-05-12 09:36:36
원래의
1288명이 탐색했습니다.

JavaScript는 웹 디자인 및 상호 작용에 일반적으로 사용되는 프런트 엔드 프로그래밍 언어입니다. 웹 페이지에서 팝업 상자는 매우 일반적인 상호 작용 방식으로, 사용자에게 일부 작업을 수행하거나 일부 정보를 표시하라는 메시지를 표시할 수 있습니다. 때로는 팝업 상자를 취소해야 할 수도 있습니다. 이 글에서는 자바스크립트를 사용하여 팝업 상자를 취소하는 방법을 소개합니다.

  1. 확인 상자 사용

JavaScript에는 사용자에게 작업을 확인하거나 취소하라는 확인 상자를 표시하는 확인() 기능이 내장되어 있습니다. 이 함수의 사용법은 다음과 같습니다.

confirm("确定要取消吗?");
로그인 후 복사

이 함수는 사용자가 확인 또는 취소를 클릭했는지 여부를 나타내는 부울 값 true 또는 false를 반환합니다.

사용자가 취소를 클릭했을 때 원래 팝업 상자를 취소하려면 이 기능을 사용하면 됩니다. 원래 팝업 상자가 다음과 같이 작성되었다고 가정해 보겠습니다.

alert("这是一个弹框");
로그인 후 복사

이제 사용자가 취소를 클릭하면 이 팝업 상자를 취소하려고 합니다. 코드는 다음과 같습니다.

if(confirm("确定要取消吗?")) {
  alert("这是一个弹框");
}
로그인 후 복사

여기서는 확인( )가 true 값을 반환하면, Alert() 함수가 실행되고, 그렇지 않으면 실행되지 않습니다.

  1. 타이머 사용

자바스크립트에서는 타이머를 사용하여 팝업 상자를 취소할 수 있습니다. 팝업 상자를 띄웠다고 가정해 보겠습니다.

var myAlert = alert("这是一个弹框");
로그인 후 복사
로그인 후 복사

setTimeout() 함수를 사용하여 타이머를 설정한 다음 타이머에 의해 실행되는 콜백 함수에서 팝업 상자를 취소할 수 있습니다. 코드는 다음과 같습니다.

var myAlert = alert("这是一个弹框");
var myTimer = setTimeout(function() {
  myAlert.close();
}, 5000);
로그인 후 복사

이 예제에서는 타이머가 실행되면 5초 타이머를 설정하고 콜백 함수가 실행됩니다. 팝업 상자를 닫기 위해 이 콜백 함수에서 close() 메서드가 호출됩니다.

팝업 상자를 닫는 방법은 브라우저마다 다를 수 있으며 일부 브라우저에서는 close() 메서드를 사용할 수 있지만 일부 브라우저에서는 window.close( ) 방법.

  1. 이벤트 리스너 사용

JavaScript에서는 이벤트 리스너를 사용하여 팝업 상자를 취소할 수 있습니다. 이미 팝업 상자를 표시했다고 가정해 보겠습니다.

var myAlert = alert("这是一个弹框");
로그인 후 복사
로그인 후 복사

현재 창에 클릭 이벤트 리스너를 추가한 다음 콜백 함수에서 팝업 상자를 취소할 수 있습니다. 코드는 다음과 같습니다.

var myAlert = alert("这是一个弹框");
window.addEventListener("click", function() {
  myAlert.close();
});
로그인 후 복사

이 예에서는 사용자가 아무 곳이나 클릭하면 콜백 함수가 트리거되는 클릭 이벤트 리스너를 추가합니다. 팝업 상자를 닫기 위해 이 콜백 함수에서 close() 메서드가 호출됩니다.

이벤트 리스너를 사용할 때 팝업 상자가 떴는지 확인하고 현재 창에 리스너를 추가해야 한다는 점에 유의해야 합니다. 그렇지 않으면 로직 오류가 발생할 수 있습니다.

요약하자면 JavaScript는 팝업 상자를 취소하는 여러 가지 방법을 제공하며 개발자는 필요에 따라 적절한 방법을 선택할 수 있습니다. 또한, 팝업창을 취소할 때 브라우저 호환성과 논리적 정확성에도 주의가 필요합니다.

위 내용은 자바스크립트 취소 팝업 상자의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿