くらげらぼ

                
                    /**
 * 浮き出しダイアログ作成
 *
 * @version 1.0.0
 *
 * @author aonokurage
 */
(function( $ ){

    $.fn.dialogs = function( options ) {

        // 設定
        var settings = $.extend({
            'width'  : 90,//vw
            'height' : 90,//vh
            'padding': 15,//px
            'background'   : '#ffffff',//ダイアログ背景
            'border-radius': 15,//ダイアログ角丸
            'border': 'solid 3px #000000',//ダイアログ罫線
            'outer-shadow': 'rgba(0,0,0,0.3)',//ダイアログ周りのカラー
            'type': 'delete',
        }, options);

        this.each(function(){
            var $this = $(this);// 現状を取得
            var $clone = $this.clone();// コピーを作成
            var $parent = $this.parent();// 本物をコピー
            if (settings["type"] == "delete") $(this).remove();//本物を一度削除
            var $outer = $("
");//ブラウザ全体を覆う
            $outer.css("background-color",settings["outer-shadow"]);
            $outer.css("position","absolute");
            $outer.css("top",0);
            $outer.css("left",0);
            $outer.css("width","100vw");
            $outer.css("height","100vh");
            $outer.css("z-index",1000);
            var $dialog = $("
");
            $dialog.css("width",settings["width"]+"vw");
            $dialog.css("height",settings["height"]+"vh");
            $dialog.css("padding",settings["padding"]+"px");
            $dialog.css("background-color",settings["background"]);
            $dialog.css("border-radius",settings["border-radius"]+"px");
            $dialog.css("border",settings["border"]);
            $dialog.css("position","absolute");
            $dialog.css("top",((100-settings["height"])/2)+"vh");
            $dialog.css("left",((100-settings["width"])/2)+"vw");
            $dialog.css("z-index",1001);
            $dialog.css("overflow","auto");
            // 組み立て
            $dialog.append($this);
            $outer.append($dialog);
            $("body").append($outer);
            // bodyのcss設定
            $("body").css("position","relative");

            // クリックで閉じる
            $outer.click(function(){
                $outer.remove();
                if (settings["type"] == "delete") $parent.append($clone);
            });
        });

    };

})( jQuery );