> 웹 프론트엔드 > 프런트엔드 Q&A > jquery 팝업 창을 닫은 후 페이지 새로 고침

jquery 팝업 창을 닫은 후 페이지 새로 고침

WBOY
풀어 주다: 2023-05-25 09:05:36
원래의
885명이 탐색했습니다.

웹 개발에서 팝업 창은 사용자에게 중요한 정보를 표시하거나 사용자가 일부 작업을 수행할 수 있도록 하는 데 자주 사용됩니다. jQuery 팝업 플러그인을 사용하면 팝업 창을 더 쉽게 만들 수 있습니다. 그러나 팝업 창이 닫히면 페이지가 자동으로 새로 고쳐지지 않는 문제가 많은 개발자들에게 발생했을 것입니다. 이 기사에서는 jQuery 팝업 플러그인을 사용하여 팝업 창이 닫힌 후 페이지를 자동으로 새로 고치는 방법을 소개합니다.

1. jQuery 팝업 플러그인 사용

jQuery 팝업 플러그인에는 여러 종류가 있으며 그 중 가장 일반적으로 사용되는 것은 Layer, Bootstrap Modal, Sweet Alert 등입니다. Layer를 예로 들면, 사용하기 전에 jQuery 라이브러리와 Layer의 CSS 및 JS 파일을 소개해야 합니다.

<link rel="stylesheet" href="path/layer.css"/>
<script src="path/jquery.min.js"></script>
<script src="path/layer.js"></script>
로그인 후 복사

다음으로 다음 코드를 사용하여 간단한 팝업 창을 만듭니다.

layer.open({
    title: '提示',
    content: '这是一条提示信息'
});
로그인 후 복사

그러면 제목이 "Prompt"이고 내용이 "This is a 프롬프트 메시지"인 팝업 창이 생성됩니다. 그러나 사용자가 팝업 창을 닫으면 페이지가 자동으로 새로 고쳐지지 않으므로 해당 코드를 작성해야 합니다.

2. 해결 방법

팝업 창이 닫힌 후 페이지를 새로 고치는 방법에는 여러 가지가 있습니다. 다음으로 몇 가지 일반적인 방법을 소개하겠습니다.

1. location.reload() 메서드를 사용하세요

location.reload() 메서드는 현재 페이지를 새로 고칠 수 있으므로 팝업 창 닫기 이벤트에서 이 메서드를 사용하여 페이지를 새로 고칠 수 있습니다. 구체적인 코드는 다음과 같습니다.

layer.open({
    title: '提示',
    content: '这是一条提示信息',
    end: function () {
        location.reload();
    }
});
로그인 후 복사

여기에서는 팝업창의 end 속성을 사용하여 콜백 함수를 바인딩합니다. 사용자가 팝업 창을 닫으면 이 기능이 실행되어 페이지를 새로 고칩니다.

location.reload() 메서드를 사용하면 JavaScript, CSS, 이미지 등을 포함한 모든 리소스가 다시 로드된다는 점에 유의해야 합니다. 페이지에 큰 리소스가 있는 경우 페이지 새로 고침 속도가 느려질 수 있습니다. 그래서 주의해서 사용해야 합니다.

2. location.href 메소드를 사용하세요

location.href 메소드는 새로운 URL로 점프할 수 있지만, 현재 페이지의 URL로 점프하면 페이지를 새로 고칠 수 있습니다. 구체적인 코드는 다음과 같습니다.

layer.open({
    title: '提示',
    content: '这是一条提示信息',
    end: function () {
        location.href = location.href;
    }
});
로그인 후 복사

여기에서도 팝업창의 end 속성을 사용하여 콜백 함수를 바인딩하고, 이 함수에서 location.href 메서드를 사용하여 현재 페이지의 URL로 이동합니다. 그러면 페이지가 새로 고쳐집니다.

location.href 메소드를 사용하면 링크를 클릭하는 것처럼 새 URL로 이동하므로 이전 페이지에 저장되지 않은 데이터가 있는 경우 데이터 손실이 발생할 수 있으므로 반드시 함께 사용해야 합니다. 주의.

3. location.replace 메소드 사용

location.replace 메소드는 현재 페이지를 지정된 URL로 대체할 수 있으며 페이지를 새로 고칠 수도 있습니다. 구체적인 코드는 다음과 같습니다.

layer.open({
    title: '提示',
    content: '这是一条提示信息',
    end: function () {
        location.replace(location.href);
    }
});
로그인 후 복사

마찬가지로 팝업 창의 end 속성을 사용하여 콜백 함수를 바인딩합니다. 이 함수에서는 location.replace 메서드를 사용하여 현재 페이지를 다음 URL로 바꿉니다. 현재 페이지를 새로 고칩니다.

location.replace 메소드를 사용하면 현재 페이지의 기록 기록이 교체되므로 사용자는 브라우저의 뒤로 버튼을 사용하여 이전 페이지로 돌아갈 수 없으므로 주의해서 사용해야 합니다.

위 내용은 jQuery 팝업 플러그인을 사용하여 팝업 창이 닫힌 후 페이지가 자동으로 새로 고쳐지도록 하는 솔루션입니다. 물론 이 기능을 구현하는 다른 방법도 많이 있으므로 실제 상황에 따라 선택해야 합니다.

위 내용은 jquery 팝업 창을 닫은 후 페이지 새로 고침의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

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