Comment utiliser PHP et JS pour annuler le lien dans la fenêtre contextuelle et accéder à la page

Avec la complexité croissante de divers sites Web et applications, les fenêtres contextuelles sont devenues une méthode d'interaction très courante. Lorsque le client a besoin d'opérer dans une fenêtre pop-up, il est parfois nécessaire d'annuler le lien dans la fenêtre pop-up pour accéder à la page, tout en gardant la fenêtre pop-up toujours visible. Cet article expliquera comment utiliser PHP et JS pour réaliser cette fonction.

Première étape : créer une feuille de style

Tout d'abord, nous devons définir le style de la fenêtre contextuelle. Ceci peut être réalisé via CSS, nous devons ajouter le code suivant dans l'en-tête :

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

Dans cet exemple, nous créons un div appelé "popup" et le définissons sur un positionnement absolu. Ensuite, nous définissons certaines propriétés de style, notamment la couleur de la bordure, la couleur du remplissage et de l'arrière-plan. Enfin, nous l'avons défini sur invisible. Ce div sert de conteneur pour le popup, que nous utiliserons plus tard dans JS pour déterminer sa visibilité.

Étape 2 : Créer une fonction JS

Ensuite, nous devons créer une fonction JavaScript pour gérer l'événement de clic du lien. Lorsque le lien est cliqué, cette fonction déterminera si le saut de page doit être annulé en interrogeant l'attribut href du lien cible. Si le lien pointe vers une autre page, le script empêchera le navigateur de charger cette page et affichera son contenu dans une popup.

Voici le code de cette fonction :

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

Ce code utilise l'objet XMLHttpRequest pour charger l'URL spécifiée. Lorsque la demande est terminée, nous insérons le contenu HTML obtenu dans le conteneur contextuel et l'affichons. Enfin, la fonction retournera false pour annuler le saut de page.

Étape 3 : Utilisez la fonction JS dans le fichier PHP

Maintenant, nous devons utiliser la fonction JS que nous venons de créer dans le fichier PHP. Nous pouvons faire exécuter la fonction JS lorsque l'on clique sur le lien en générant un lien contenant l'attribut "data-target".

Voici un exemple d'extrait de code PHP, un fichier contenant une fonction JS appelée "popup.php" :

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

Dans ce code, nous créons un élément de lien qui inclut un attribut "data-target" (pointant vers le div que nous avons créé précédemment) et un gestionnaire d'événements "onclick" pour appeler notre fonction JS lorsque l'utilisateur clique sur le lien. Cette fonction insérera le contenu du lien cible dans le div que nous avons créé précédemment.

Étape 4 : Test

Maintenant, nous avons terminé tout le travail de codage. Nous pouvons ouvrir notre fichier PHP dans un navigateur et tester notre code lorsque vous cliquez sur le lien. Si tout fonctionne correctement, lorsque nous cliquons sur le lien, nous devrions pouvoir voir le contenu de l'URL spécifiée affichée dans une fenêtre contextuelle au lieu de l'ouvrir dans une nouvelle page.

Conclusion

En utilisant PHP et JS, nous pouvons facilement ajouter des pop-ups à notre site Web. Nous pouvons utiliser cette technique pour éviter d'interrompre la navigation de l'utilisateur sur la page en cours pendant l'interaction et fournir plus d'informations sans quitter la page. De plus, nous pouvons améliorer l'expérience interactive de l'utilisateur en annulant les sauts de page liés, permettant ainsi de mieux contrôler et exécuter le comportement du site Web.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!