/*
* @title OverlayTemplate
* @description オーバーレイ表示の基本テンプレート
* @include http://*
* @license MIT License
* @require http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js
*/
// ToDo
// [ ] 削除処理をフェードアウトに
// [ ] オーバーレイサイズを自動調整（パラメータで指定した値よりウィンドウが小さい場合はウィンドウサイズを基準に調整する）
// [ ] オーバーレイを天地中央に表示する
// プラグイン部分
(function ( $ ){
$.fn.letOverlay = function ( options ) {
// オプション設定
var settings = $.extend({}, {
// デフォルトパラメータ指定
shadowName: "let-overlay-shadow",
shadowZIndex: 99998,
shadowOpacity: 0.6,
shadowColor: "#999",
contentName: "let-overlay-content",
contentZIndex: 99999,
contentColor: "#fff",
contentRadius: "10px",
contentTop: "10px",
contentLeft: "10px",
contentWidth: "400px",
contentHeight: "300px",
contentClassName: "let-overlay"
}, options);
// プラグイン動作の記述
var htmlShadow = "<div id=\"" + settings.shadowName + "\" class=\"" + settings.contentClassName + "\"></div>";
var htmlContent = "<div id=\"" + settings.contentName + "\" class=\"" + settings.contentClassName + "\"></div>";
var htmlOverlay = htmlShadow + htmlContent;
// オーバーレイ生成処理
if( !$("." + settings.contentClassName ).length){
// DOM要素の追加
$("body").append(htmlOverlay);
// シャドウのCSS設定
$("#" + settings.shadowName ).css({
background: settings.shadowColor,
opacity: settings.shadowOpacity,
position: "fixed",
top: 0,
left: 0,
width: "100%",
height: "100%",
});
// オーバーレイ本体のCSS設定
$("#" + settings.contentName ).css({
background: settings.contentColor,
borderRadius: settings.contentRadius,
position: "fixed",
top: settings.contentTop,
left: settings.contentLeft,
width: settings.contentWidth,
height: settings.contentHeight,
});
}
// オーバーレイ削除処理
$(document).on("keydown", "body", function( e ){
if( e.keyCode == 27 ) {
$( "." + settings.contentClassName ).remove();
return false;
}
});
$(document).on("click", "#" + settings.shadowName , function() {
$( "." + settings.contentClassName ).remove();
return false;
});
};
}( jQuery ) );
// 実行
$(function(){
$().letOverlay();
});
