PHP 및 JS를 사용하여 팝업창의 링크를 취소하고 해당 페이지로 이동하는 방법

다양한 웹사이트와 애플리케이션이 점점 더 복잡해짐에 따라 팝업 창은 매우 일반적인 상호 작용 방식이 되었습니다. 클라이언트가 팝업 창에서 작동해야 하는 경우 팝업 창을 계속 표시한 상태에서 페이지로 이동하기 위해 팝업 창의 링크를 취소해야 하는 경우가 있습니다. 이 기사에서는 PHP와 JS를 사용하여 이 기능을 구현하는 방법을 소개합니다.

1단계: 스타일 시트 만들기

먼저 팝업 창의 스타일을 설정해야 합니다. 이는 CSS를 통해 달성할 수 있으며 헤드에 다음 코드를 추가해야 합니다.

<style type="text/css">
#popup {
position:absolute;
left:0;
top:0;
z-index:99999;
background:#FFF;
border:2px solid #000;
padding:20px;
display:none;
}
</style>

이 예에서는 "popup"이라는 div를 만들고 절대 위치 지정으로 설정합니다. 그런 다음 테두리 색상, 채우기 및 배경색을 포함한 일부 스타일 속성을 설정합니다. 마지막으로 보이지 않게 설정했습니다. 이 div는 나중에 JS에서 가시성을 결정하는 데 사용할 팝업 창의 컨테이너 역할을 합니다.

2단계: JS 함수 만들기

다음으로 링크의 클릭 이벤트를 처리하는 JavaScript 함수를 만들어야 합니다. 링크가 클릭되면 이 함수는 대상 링크의 href 속성을 쿼리하여 페이지 이동을 취소해야 하는지 여부를 결정합니다. 링크가 다른 페이지를 가리키는 경우 스크립트는 브라우저가 해당 페이지를 로드하는 것을 방지하고 해당 내용을 팝업에 표시합니다.

이 함수에 대한 코드는 다음과 같습니다.

function popup(url) {
    var xhttp = new XMLHttpRequest();
    xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
        document.getElementById("popup").innerHTML = this.responseText;
        document.getElementById("popup").style.display = "block";
        }
    };
    xhttp.open("GET", url, true);
    xhttp.send();
    return false;
}

이 코드는 XMLHttpRequest 개체를 사용하여 지정된 URL을 로드합니다. 요청이 완료되면 획득한 HTML 콘텐츠를 팝업 컨테이너에 삽입하여 표시합니다. 마지막으로 함수는 페이지 이동을 취소하기 위해 false를 반환합니다.

3단계: PHP 파일에서 JS 함수 사용

이제 PHP 파일에서 방금 생성한 JS 함수를 사용해야 합니다. "data-target" 속성이 포함된 링크를 생성하여 링크를 클릭할 때 JS 함수가 실행되도록 할 수 있습니다.

다음은 "popup.php"라는 JS 함수가 포함된 파일인 PHP 코드 조각의 예입니다.

<a href="http://www.example.com" onclick="return popup(this.href);" data-target="#popup">Read more</a>

이 코드에서는 "data-target" 속성을 포함하는 링크 요소를 생성합니다( 이전에 생성한 div) 및 "onclick" 이벤트 핸들러를 사용하여 사용자가 링크를 클릭할 때 JS 함수를 호출합니다. 이 함수는 대상 링크의 콘텐츠를 이전에 만든 div에 삽입합니다.

4단계: 테스트

이제 모든 코딩 작업이 완료되었습니다. 브라우저에서 PHP 파일을 열고 링크를 클릭하면 코드를 테스트할 수 있습니다. 모든 것이 올바르게 작동하는 경우 링크를 클릭하면 새 페이지가 열리는 대신 팝업 창에 표시된 지정된 URL의 내용을 볼 수 있어야 합니다.

결론

PHP와 JS를 사용하면 웹사이트에 팝업을 쉽게 추가할 수 있습니다. 우리는 이 기술을 사용하여 상호 작용 중에 사용자의 현재 페이지 탐색을 방해하지 않고 페이지를 떠나지 않고도 더 많은 정보를 제공할 수 있습니다. 또한, 링크된 페이지 이동을 취소함으로써 사용자의 상호작용 경험을 향상시킬 수 있으며 이를 통해 웹사이트 동작을 더 잘 제어하고 실행할 수 있습니다.

위 내용은 PHP 및 JS를 사용하여 팝업창의 링크를 취소하고 해당 페이지로 이동하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!