jQueryでのポップアップボックスジャンプ

Web テクノロジーの継続的な進歩に伴い、フロントエンド開発でポップアップ ジャンプが使用されることが増えています。中でもjQueryのポップアップジャンプエフェクトは多くの開発者に好まれています。この記事では、ポップアップジャンプを実装するためのjQueryの具体的な手順と実践的なデモを紹介します。

1. ポップアップ ボックス ジャンプの概要

ポップアップ ボックス ジャンプは通常、現在のページにプロンプ​​ト ボックスをポップアップ表示して、情報を表示したり、ユーザーに次の操作を実行するよう通知したりするために使用されます。手術。ジャンプとは、プロンプト ボックス内のボタンまたはリンクをクリックすると、対応するページに直接ジャンプすることを意味します。ポップアップ ジャンプの利点は、ユーザー インタラクション エクスペリエンスを向上させ、現在のページを終了せずにジャンプ効果を実現できることです。

2. jQuery がポップアップ ボックス ジャンプを実現する手順

jQuery は、dialog() メソッドを呼び出すことでポップアップ ボックスの機能を実現し、ダイアログ メソッドを呼び出すことでページ ジャンプ機能を実現します。 window.location.href() メソッド。

1. jQuery ライブラリの導入

jQuery ポップアップ ボックス ジャンプを実装する前に、まず jQuery ライブラリを導入する必要があります。これはヘッダー スクリプト タグに導入できます:

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

2. ポップアップ ボックスの作成

jQuery UI プラグインの Dialog() メソッドを使用してポップアップを作成します。ポップアップボックス内の要素や内容、スタイルなどをカスタマイズできます。たとえば、単純なポップアップ ボックスを作成します:

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

上記のコードでは、ポップアップ ボックスを自動的に開かないように autoOpen 属性を false に設定し、ポップアップ ボックスを自動的に開かないように modal 属性を true に設定します。ポップアップ ボックスの外側の領域をクリックしても、ポップアップ ボックスは閉じません。ポップアップ ボックス内のボタンは、buttons 属性でカスタマイズできます。

3. ポップアップ ボックスで window.location.href を呼び出してジャンプします

ポップアップ ボックスにボタンまたはリンクを追加し、クリック時に window.location.href を呼び出しますボタンまたはリンクのイベント ページジャンプが完了します。たとえば、上記のポップアップ ボックスに「ジャンプ」ボタンを追加します:

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

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

3. jQuery ポップアップ ボックスのジャンプ例のデモ

以下は完全な jQuery ポップアップ ボックスです。ジャンプの例とデモ ポップアップ ボックスを作成し、ポップアップ ボックス内の新しいページにジャンプする方法を学びます:

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

この例では、ユーザーが現在のページから離れようとすると、確認ボックスが表示されます。ポップアップします。ユーザーが「OK」ボタンをクリックすると、「example.com」ページにリダイレクトされます。ユーザーが「キャンセル」ボタンをクリックすると、ポップアップ ボックスは閉じられ、現在のページに残ります。

概要

この記事では、ポップアップ ボックス ジャンプを実装するための jQuery の手順とサンプル デモンストレーションを簡単に紹介します。ポップアップ ボックスを使用してジャンプすると、ユーザー インタラクション エクスペリエンスが向上し、ユーザーに利便性がもたらされます。フロントエンド開発者は、jQuery のポップアップ ジャンプの知識を理解し、習得する必要があります。

以上がjQueryでのポップアップボックスジャンプの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。