2

子供向けのモバイルサイト用のファンシーボックスポップアップを作成しようとしています。

  • 外部リンクに対してのみ表示されます
  • 外部のWebサイトへのリンクを続行するか、ファンシーボックスを閉じてページに戻るためのリンクが表示されます

私がこれまでに見つけた唯一の解決策は、各リンクにこのようなものを使用することです...

<a id="external" href="#external-block">Go to external link</a> 

<div style="display:none">
<div id="external-block">
<h2>Warning</h2>
<p>Hey, you're leaving this site <p>
<a href="onclick="$.fancybox.close();">Return</a>
<a href="http://actuallink">Leave the site</a>
</div>

とjsで

$(document).ready(function() {
  $("a#external").fancybox();
});

ただし、リンクごとに冗長です。ページ上のリンクが外部であるかどうかを検出する1つのjs関数を作成する方法を見つけたいのですが、URLに移動する代わりにクリックすると、hrefを取得して作成します（つまり、リンクごとに非表示のdivがありません）。 ）そのURLに移動するか、戻るためのメッセージを含むfancyboxポップアップ。

4

2 に答える 2

3

fancyboxの使用は必須ですか？これがなければ、これはおそらくもっと簡単かもしれません。

ライトボックスとして機能し、リンクがクリックされるたびにボックスを表示する単一の非表示の固定要素を作成できます。確かに、閉じるボタンを使用してボックスを非表示にする独自の機能を追加する必要もありますが、それは十分に単純なはずです。

この新しいライトボックス内に外部リンクを設定するには、次のようにします。

$('a[href^="http://"], a[href^="https://"]').click(function(e) {
    // This is used to override the default event and
    // stop the browser from redirecting the user to the url.
    e.preventDefault();

    // Set the href for the #external_link element inside the lightbox
    // to the one from the anchor tag that was clicked on.
    $("#lightbox #external_link").attr("href", $(this).attr("href"));

    // Show the light-box
    $("#lightbox").show();
});

fancyboxが提供するフェード効果を求めている場合は、少し時間を取ってCSSトランジションを確認することをお勧めします。

于 2012-11-17T18:15:48.973 に答える
1

すべての要素にイベントハンドラーを設定し、aそれが外部リンクであるかどうかを確認してから、fancyboxウィンドウを開くことができます。何かのようなもの：

$("a").on("click", function(e) {       
    if ($(this).attr("href").indexOf("http://")>-1
       ||
       $(this).attr("href").indexOf("https://")>-1)
    {
        e.preventDefault();
        e.stopPropagation();
        message = "<div>This site opens in a new window<br/>" + 
                  "<input type=\"button\" value=\"Continue\" " +  
                     "onclick=\"location.href='"+$(this).attr("href")+"';\">"+
                  "</div>";
        $.fancybox(message);

    }
});

フィドルの[続行]ボタンは外部リンクをブロックするため機能しませんが、コードは機能しています：http: //jsfiddle.net/6nfWJ/

于 2012-11-17T18:36:03.587 に答える