How to use PHP and JS to cancel the link in the pop-up window and jump to the page

With the increasing complexity of various websites and applications, pop-up windows have become a very common way of interaction. When the client needs to operate in a pop-up window, sometimes it is necessary to cancel the link in the pop-up window to jump to the page, while keeping the pop-up window still visible. This article will introduce how to use PHP and JS to achieve this function.

Step one: Create a style sheet

First, we need to set the style of the pop-up window. This can be achieved through CSS, we need to add the following code in the head:

<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>

In this example, we create a div called "popup" and set it to absolute positioning. Then we set some style properties including border color, fill and background color. Finally, we set it to invisible. This div serves as the container for the pop-up window, which we will use later in JS to determine its visibility.

Step 2: Create a JS function

Next, we need to create a JavaScript function to handle the link's click event. When the link is clicked, this function will determine whether the page jump needs to be canceled by querying the href attribute of the target link. If the link points to another page, the script will prevent the browser from loading that page and display its content in a popup.

The following is the code for this function:

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

This code uses the XMLHttpRequest object to load the specified URL. When the request is completed, we insert the obtained HTML content into the pop-up window container and display it. Finally, the function will return false to cancel the page jump.

Step 3: Use the JS function in the PHP file

Now, we need to use the JS function we just created in the PHP file. We can have the JS function execute when the link is clicked by generating a link containing the "data-target" attribute.

Here is an example of a PHP code snippet, the file contains a JS function called "popup.php":

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

In this code, we create a link element that The element includes a "data-target" attribute (pointing to the div we created earlier) and an "onclick" event handler to call our JS function when the user clicks the link. This function will insert the content from the target link into the div we created earlier.

Step 4: Test

Now, we have completed all the coding work. We can open our PHP file in a browser and test our code when the link is clicked. If everything is working correctly, when we click the link, we should be able to see the content of the specified URL displayed in a pop-up window instead of opening in a new page.

Conclusion

By using PHP and JS, we can easily add pop-ups to our website. We can use this technique to avoid interrupting the user's browsing of the current page during the interaction and provide more information without leaving the page. In addition, we can enhance the user's interactive experience by canceling linked page jumps, thereby better controlling and executing the behavior of the website.

The above is the detailed content of How to use PHP and JS to cancel the link in the pop-up window and jump to the page. For more information, please follow other related articles on the PHP Chinese website!