PHPとJSを使ってポップアップウィンドウのリンクを解除してそのページにジャンプする方法

さまざまな Web サイトやアプリケーションが複雑になるにつれて、ポップアップ ウィンドウは非常に一般的な対話方法になりました。クライアントがポップアップ ウィンドウで操作する必要がある場合、ポップアップ ウィンドウを表示したままにしてページにジャンプするために、ポップアップ ウィンドウ内のリンクをキャンセルする必要がある場合があります。この記事では、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 関数を実行させることができます。

これは PHP コード スニペットの例です。ファイルには「popup.php」という JS 関数が含まれています:

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

このコードでは、リンク要素を作成します。 「data-target」属性 (前に作成した div を指す) と、ユーザーがリンクをクリックしたときに JS 関数を呼び出すための「onclick」イベント ハンドラー。この関数は、ターゲット リンクのコンテンツを、前に作成した div に挿入します。

ステップ 4: テスト

これで、すべてのコーディング作業が完了しました。ブラウザで PHP ファイルを開いて、リンクをクリックしたときにコードをテストできます。すべてが正しく動作している場合は、リンクをクリックすると、新しいページが開くのではなく、ポップアップ ウィンドウに指定された URL のコンテンツが表示されるはずです。

結論

PHP と JS を使用すると、Web サイトにポップアップを簡単に追加できます。この手法を使用すると、インタラクション中にユーザーによる現在のページの閲覧の中断を回避し、ページを離れることなくより多くの情報を提供できます。さらに、リンクされたページのジャンプをキャンセルすることでユーザーのインタラクティブなエクスペリエンスを強化し、Web サイトの動作をより適切に制御および実行できます。

以上がPHPとJSを使ってポップアップウィンドウのリンクを解除してそのページにジャンプする方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。