1

この問題の特定の用語がわからないので、ここに私が苦労しているものがあります。

ファンシーボックスやその他のフローティング ウィンドウ フレームワークを Web サイトで使用することを想像してみてください。リンクをクリックすると、新しい fancybox インスタンスが作成され、Web ページを覆うフレームが表示されます。ファンシーボックス インスタンスを単純に開始できない場合がいくつかあります (ユーザーがリンクに直接移動する、ユーザーが新しいタブでリンクを開く、ユーザーのブラウザーで JavaScript が無効になっている)。

正確な意味がわからない場合は、facebook に移動して画像をクリックすると、 fancybox に似たものが開きます。それを閉じて、画像を右クリックして新しいタブでリンクを開きます。ファンシーボックス (または facebook が使用するもの) の内容は、実際のページとは若干異なります。

phpを使用してこれを行うにはどうすればよいですか?

アイデアありがとうございます

4

1 に答える 1

2

これは実際には PHP の問題ではなく、JavaScript の問題です。rel='fancybox'タグにorclass='fancybox'属性を追加aし、基本機能を使用することで、fancybox を使用できます。次にhref、iframe ポップアップでパーツを開きます。リンクを新しいタブで開くと、そのhref部分が新しいタブで開きます。

これで、2 つの個別のリンクを使用することもできます。1 つは新しいタブ/no JS リンク用、もう 1 つはポップアップ用です。これを行うには、新しいタブ リンクを として追加するだけでhref、デフォルトの動作で新しいタブ ページが開きます。

fancybox で別のページを開くには、いくつかの方法があります。1 つは完全に異なるリンクを作成することで、もう 1 つはそのファンシーボックスのリンクにパラメーターを追加することです。後者は画像のような静的コンテンツでは効率が悪いため、私は前者を好みます。

ファンシーボックスを開く通常のJSの代わりに、次のようにします。

<a href='newtab.html' data-fancylink='fancy.html' class='fancy'>open me</a>
<script>
$('.fancy').click(function() {
  var href = $(this).data('fancylink');
  if (href == undefined) {
    href = $(this).attr('href'); //fall back to default when no fancylink
  }

  $.fancybox({
      'autoScale': true,
      'autoDimensions': true,
      'centerOnScroll': true,
      'type': 'iframe',
      'href': href
  });
});

</script>

編集（JFKによる）：一般的な考え方は良いですが、上記の実際のスクリプトは次の微調整なしでは機能しません：

<script>
$(document).ready(function () {
    $('.fancy').click(function (e) {
        e.preventDefault(); // you still need to prevent default behavior 
        var href = $(this).data('fancylink');
        if (href == undefined) {
            href = this.href; //fall back can be simplified this way
        }
        $.fancybox({
            type: 'iframe',
            href: href
        });
    });
}); // ready
</script>

JSFIDDLEを参照してください

于 2013-05-08T07:38:42.990 に答える