この記事は2年以上前に書かれた記事です。現状にそぐわないかもなのでご注意を。

全ての外部リンクに確認画面をはさむテスト

全ての外部リンクに確認画面を自動表示させてみます。
jQueryを使います。

LeaveNoticeを参考に、いろいろカスタマイズしています。

  • 外部リンクは新ウィンドウ(タブ)で開く
  • 同じウィンドウで開くか新ウィンドウで開くか選択できる
  • URLは常に表示する
  • title属性はある場合だけURL上に表示
  • 「この画面を次回移行表示しない」チェックボックスを追加
    (検証用:チェックを解除

rel=”external” or target=”_blank” or class=”outlink” 属性のあるリンク:
自動で確認画面+新しいタブ+クラス「outlink」付与

Yahoo!JAPAN

twitter

Google(タイトル属性無し)

長いURLの省略表示サンプル

※rel=”external” または target=”_blank”と、ヘッダ内に記述する個別フラグ(下記)を同時に設定するのはNG。

個別設定→クラス「time5」のリンク:
自サイト名「サンプルサイト」、5秒後に自動遷移

MSN Japan(5秒後に自動遷移)

jQuery(function(){
jQuery('a.time5').leaveNotice({
siteName:"サンプルサイト",
timeOut:5000 });
});

個別設定→クラス「custom」のリンク:その他オプション

参考:LeaveNotice

jQuery('a.custom').leaveNotice({
siteName:"Labrid WP",
exitMessage:"<h3>Say goodbye to {SITENAME}!</h3><p>Thanks. Shut the door behind you!</p>",
preLinkMessage:"<hr/><p>Have fun at:<br/><strong>{URL}</strong></p><hr/>",
overlayId:"custom-blackout",
messageBoxId:"custom-messageBox",
messageHolderId:"custom-messageHolder",
overlayAlpha:0.6
});

※IE6:×

※IE6での表示に対応しました。

スポンサーリンク