この投稿は古く、2015年12月16日 に、同じ目的のものを書き直した。
先日紹介した画像リソースを持たない Spin.js を使ってページ読込み中などで、モーダルを表示させるものを、
汎用的に使用できるように作ってみました。
メッセージ、サイズ、フォントサイズ、フォントファミリ、そして spin のオプションを、
オプションとして指定できるようにしてみました。
jQuery のソース１本です。CSS も中で指定してます。
/*
* progressmodal.js
*
* initProgressModal( selector
* ,{ message: "Loading..."
* , width: "220px"
* , height: "100px"
* , fontsize: "20px"
* , fontfamily: "Century"
* , spinopts : { // spin option ==> http://fgnass.github.io/spin.js
* lines: 13, // The number of lines to draw
* length: 20, // The length of each line
* width: 12, // The line thickness
* radius: 30, // The radius of the inner circle
* corners: 1, // Corner roundness (0..1)
* rotate: 0, // The rotation offset
* direction: 1, // 1: clockwise, -1: counterclockwise
* color: '#000000', // #rgb or #rrggbb or array of colors
* speed: 1, // Rounds per second
* trail: 60, // Afterglow percentage
* shadow: false, // Whether to render a shadow
* hwaccel: false, // Whether to use hardware acceleration
* className: 'spinner', // The CSS class to assign to the spinner
* zIndex: 2e9, // The z-index (defaults to 2000000000)
* top: '10px', // Top position relative to parent in px
* left: 'auto' // Left position relative to parent in px
* }
* }
* );
* displayProgressModal("div#modal", true);
*
*/
var _progressmodal_spinner;
function initProgressModal(selector, options){
var container = selector + " div.progressmodal-container";
$(selector).append('<div class="progressmodal-background"></div>');
$(selector).append('<div class="progressmodal-container"></div>');
var spinopts = {};
if ($.isEmptyObject(options)){
$(container).append('<table><tr><td class="progressmodal-spin"><div id="progressmodal-spin"></div></td><td>Loading...</td></tr></table>');
// CSS 初期化
initProgressModalCSS(selector);
}else{
if ($.isEmptyObject(options['message'])){
$(container).append('<table><tr><td class="progressmodal-spin"><div id="progressmodal-spin"></div></td><td>Loading...</td></tr></table>');
}else{
$(container).append('<table><tr><td class="progressmodal-spin"><div id="progressmodal-spin"></div></td><td>'+options['message']+'</td></tr></table>');
}
// CSS 初期化
initProgressModalCSS(selector);
if (!$.isEmptyObject(options['width'])){
$(container).width(options['width']);
}
if (!$.isEmptyObject(options['height'])){
$(container).height(options['height']);
}
if (!$.isEmptyObject(options['fontsize'])){
$(container+" table td").css('font-size', options['fontsize']);
}
if (!$.isEmptyObject(options['fontfamily'])){
$(container+" table td").css('font-family', options['fontfamily']);
}
if (!$.isEmptyObject(options['spinopts'])){
spinopts = options['spinopts'];
}
}
_progressmodal_spinner = new Spinner(spinopts);
adjustProgressModalCenter(container);
$(window).resize(function(){
adjustProgressModalCenter(container);
});
}
function initProgressModalCSS(selector){
var divModalObj = new Object();
divModalObj.display = "none";
divModalObj.position = "fixed";
divModalObj.width = "100%";
divModalObj.height = "100%";
$(selector).css(divModalObj);
$(selector+" div.progressmodal-background").css("position", "fixed");
$(selector+" div.progressmodal-background").css("width", "100%");
$(selector+" div.progressmodal-background").css("height", "100%");
$(selector+" div.progressmodal-background").css("background-color", "#000000");
$(selector+" div.progressmodal-background").css("opacity", "0.55");
$(selector+" div.progressmodal-background").css("filter", "alpha(opacity=55)");
$(selector+" div.progressmodal-background").css("-ms-filter", "alpha(opacity=55)");
$(selector+" div.progressmodal-container").css("position", "relative");
$(selector+" div.progressmodal-container").css("width", "200px");
$(selector+" div.progressmodal-container").css("height", "80px");
$(selector+" div.progressmodal-container").css("background-color", "#ffffff");
$(selector+" div.progressmodal-container table").css("border-collapse", "collapse");
$(selector+" div.progressmodal-container table").css("border-spacing", "0");
$(selector+" div.progressmodal-container table").css("white-space", "nowrap");
$(selector+" div.progressmodal-container table").css("position", "relative");
$(selector+" div.progressmodal-container table").css("height", "100%");
$(selector+" div.progressmodal-container table").css("margin", "auto auto auto auto");
$(selector+" div.progressmodal-container table td").css("font-size", "20px");
$(selector+" div.progressmodal-container table td").css("font-weight", "bold");
$(selector+" div.progressmodal-container table td").css("font-family", "'Lucida Grande', 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', Meiryo, メイリオ, sans-serif");
$(selector+" div.progressmodal-container table td.progressmodal-spin").css("width", "48px");
}
// プログレスモーダル open/close
function displayProgressModal(selctor, toOpen){
if (toOpen){
$(selctor).fadeIn(500);
_progressmodal_spinner.spin($('#progressmodal-spin').get(0));
}else{
_progressmodal_spinner.stop();
$(selctor).fadeOut(250);
}
}
//ウィンドウの位置をセンターに調整
function adjustProgressModalCenter(target){
var margin_top = ($(window).height()-$(target).height())/2;
var margin_left = ($(window).width()-$(target).width())/2;
$(target).css({top:margin_top+"px", left:margin_left+"px"});
}
======================================================================
テスト用のHTML は、body タグの直後にモーダル表示用の div タグを置きます。
initProgressModal でこの Element を指定して
displayProgressModal で、true を指定して表示します。
以下、テストでは、setTimeout で消しています。
$(function(){
initProgressModal("div#modal");
$('#open_modal').click(function(){
displayProgressModal("div#modal", true);
setTimeout('displayProgressModal("div#modal", false)', 4000);
return false;
});
});
</script>
</head>
<body>
<div id="modal"></div>
