Edited at

外部リンク用中間リンク生成jQueryプラグイン

More than 3 years have passed since last update.

よくある「リンク先は弊社外のサイトになります」的なやつ。

// 外部リンク用プラグイン

// 使い方
// $(".external").externalLink( option );
// オプション
// overlay: boolean オーバーレイ式の有効・無効切り替え
// overlayTitle: string オーバーレイ有効時のタイトル
// overlayMessage: string オーバーレイ有効時のメッセージテキスト
// overlayLinkText: string オーバーレイ有効時のアンカー部テキスト
// popup: boolean リンククリック時の挙動(true: ポップアップ / false: 同ウィンドウ遷移)
// prefix: string オーバーレイ関連の生成要素に付与される接頭語

( function ( $ ) {
"use strict";

$.fn.externalLink = function ( options ) {

// オプション初期化
var settings = $.extend( {
"overlay" : true,
"overlayTitle" : "外部サイトへのリンク",
"overlayMessage" : "リンクを新規ウィンドウで開きます。<br>ここから先は当社とは別のサイトになります。<br>リンク先で発生したトラブルについて、当社では一切責任を負いかねますのでご了承ください。",
"overlayLinkText" : "新規ウィンドウで開く<i class=\"fa fa-external-link\" style=\"margin-left:0.5em\"></i>",
"overlayEnableStyles" : true,
"popup" : true,
"prefix" : "sf-"
}, options );

// -----------------------------

return this.each( function () {
var $this = $(this);
$this.on("click", function (event) {
event.preventDefault();
// オーバーレイ生成
if(settings.overlay){
createOverlay(overlayId, $(this).attr("href"));
} else if(settings.popup) {
window.open($(this).attr("href"));
}
});

var overlayId = settings.prefix + "overlay";
// オーバーレイ削除動作
$(window).keydown(function (e) {
if(e.keyCode === 27){
removeOverlay(overlayId);
}
});
$("body").on("click", "#" + overlayId + "-shadow,." + settings.prefix + "external" , function(){
removeOverlay(overlayId);
});

});

// 関数: オーバーレイ生成
function createOverlay(elemId, linkUrl){
$("body").append("<div id=\"" + elemId + "\"></div>");
$("#" + elemId).append("<div id=\"" + elemId + "-shadow\"></div>");
$("#" + elemId + "-shadow").css({
position: "fixed",
display: "block",
left : 0,
top : 0,
width : "100%",
height : "100%",
background: "rgba(0,0,0,0.7)",
zIndex: 99998,
margin:0,
padding:0
});

// 中央位置取得
var contentPosition = {
left: ($(window).width() - 800) / 2,
top: ($(window).height() - 300) / 2
};

console.log( contentPosition.left + "/" + $(window).width());

$("#" + elemId).append("<div id=\"" + elemId + "-content\"></div>");
$("#" + elemId + "-content").css({
position: "fixed",
backgroundColor:"#fff",
borderRadius: "10px",
zIndex: 99999,
width:"800px",
height:"220px",
top:contentPosition.top + "px",
left: contentPosition.left + "px",
margin: 0,
});

$("#" + elemId + "-content").append("<h1 id=\"" + settings.prefix + "overlay-title\">" + settings.overlayTitle + "</h1>");
$("#" + elemId + "-content").append("<p id=\"" + settings.prefix + "overlay-message\">" + settings.overlayMessage + "</p>");
if(settings.popup){
$("#" + elemId + "-content").append("<p id=\"" + settings.prefix + "overlay-link\"><a class=\"" + settings.prefix + "external\" href=\"" + linkUrl + "\" target=\"_blank\">" + settings.overlayLinkText + "</a></p>");
} else {
$("#" + elemId + "-content").append("<p id=\"" + settings.prefix + "overlay-link\"><a class=\"" + settings.prefix + "external\" href=\"" + linkUrl + "\">" + settings.overlayLinkText + "</a></p>");
}

$("#" + settings.prefix + "overlay-title").css(
{
color:"#333",
fontSize: "14px",
margin: "15px",
}
);
$("#" + settings.prefix + "overlay-message").css(
{
color: "#333",
fontSize: "12px",
margin: "15px",
}
);
$("#"+ settings.prefix + "overlay-link").css(
{
color: "#009",
fontSize: "12px",
margin: "15px",
}
);

return false;
}

// 関数: オーバーレイ削除
function removeOverlay(elemId){
$("#" + settings.prefix + "overlay-shadow, #" + settings.prefix + "overlay-content")
.fadeOut("fast", function(){
$("#" + elemId).remove();
})
}
}
} ( jQuery ) );