Saut de boîte pop-up dans jquery

Avec les progrès continus de la technologie Web, les sauts contextuels sont de plus en plus utilisés dans le développement front-end. Parmi eux, l’effet de saut contextuel de jQuery est apprécié par de nombreux développeurs. Cet article présentera les étapes spécifiques et les démonstrations pratiques de jQuery pour implémenter le saut contextuel.

1. Présentation du saut contextuel

Bop-up est généralement utilisé pour afficher une boîte de dialogue sur la page actuelle pour afficher des informations ou rappeler à l'utilisateur d'effectuer une opération. Sauter signifie que lorsque vous cliquez sur un bouton ou un lien dans la boîte de dialogue, vous accéderez directement à la page correspondante. L'avantage du saut contextuel est qu'il peut améliorer l'expérience d'interaction de l'utilisateur et obtenir l'effet de saut sans quitter la page actuelle.

2. Étapes permettant à jQuery d'implémenter le saut de boîte contextuelle

jQuery implémente la fonction de boîte contextuelle en appelant la méthode dialog() et implémente la fonction de saut de page en appelant la méthode window.location.href(). Les étapes spécifiques sont les suivantes :

1. Présentez la bibliothèque jQuery

Avant d'implémenter le saut de boîte contextuelle jQuery, vous devez d'abord présenter la bibliothèque jQuery. Il peut être introduit dans la balise de script d'en-tête :

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

2. Créez un cadre contextuel

Utilisez la méthode dialog() dans le plug-in jQuery UI pour créer un cadre contextuel et vous pouvez personnaliser les éléments. et styles dans le cadre contextuel. Par exemple, créez une simple boîte contextuelle :

<div id="dialog-box">
  <p>这是一个弹框</p>
  <a href="#" class="btn">跳转</a>
</div>

<script>
$("#dialog-box").dialog({
  autoOpen:false,
  modal:true,
  buttons:{
    "确定":function(){
      $(this).dialog("close");
    }
  }
});
</script>

Dans le code ci-dessus, l'attribut autoOpen est défini sur false pour ne pas ouvrir automatiquement la boîte contextuelle, l'attribut modal est défini sur true afin que lorsque la zone se trouve en dehors de la zone contextuelle ; est cliqué sur la boîte contextuelle, la boîte contextuelle ne sera pas fermée ; l'attribut des boutons Vous pouvez personnaliser les boutons dans la boîte contextuelle.

3. Appelez window.location.href dans la boîte contextuelle pour sauter

Ajoutez un bouton ou un lien dans la boîte contextuelle et appelez window.location.href en cas de clic du bouton ou du lien pour terminer. le saut de page. Par exemple, ajoutez un bouton « sauter » à la boîte contextuelle ci-dessus :

<a href="#" class="btn">跳转</a>

<script>
$(".btn").click(function(){
  window.location.href = "http://www.example.com";
});

3. Exemple de saut de boîte contextuelle jQuery

Ce qui suit est un exemple complet de saut de boîte contextuelle jQuery, démontrant comment créer une pop-up -up box et pop-up Aller à une nouvelle page dans la boîte :

  
  
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  
  


  

    
确定要离开该页面吗？
    确定
  

  <script>
    $("#dialog-box").dialog({
      autoOpen:false,
      modal:true,
      buttons:{
        "取消":function(){
          $(this).dialog("close");
        }
      }
    });

    $(".btn").click(function(){
      window.location.href = "http://www.example.com";
    });

    window.onbeforeunload = function(){
      $("#dialog-box").dialog("open");
    };
  </script>

Dans cet exemple, lorsque l'utilisateur tente de quitter la page actuelle, une boîte de confirmation apparaîtra. Si l'utilisateur clique sur le bouton « OK », il sera redirigé vers la page « exemple.com ». Si l'utilisateur clique sur le bouton « Annuler », la fenêtre contextuelle se ferme et reste sur la page actuelle.

Résumé

Cet article présente brièvement les étapes et les démonstrations pratiques de jQuery pour implémenter le saut de boîte contextuelle. L'utilisation de boîtes contextuelles pour sauter peut améliorer l'expérience d'interaction de l'utilisateur et apporter plus de commodité aux utilisateurs. Il est nécessaire que les développeurs front-end comprennent et maîtrisent les connaissances du saut contextuel jQuery.

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!