昔、フェードイン、フェードアウトするメッセージの jQuery を書いた。
見直すと中央寄せが中途半端でできていない。書き直す。
CSSソース
@CHARSET "UTF-8"; /** * fadeinmsg.css */ div#fadeMessageModal{ display: none; position: fixed; width: 100%; height: 100%; z-index: 300001!important; } div#fadeMessageModal div.background{ position: fixed; width: 100%; height: 100%; background-color: #000000; opacity: 0.25; filter: alpha(opacity=25); -ms-filter: "alpha(opacity=25)"; z-index: 300001; } div#fadeMessageModal div.container{ width: auto; box-shadow:0px 0px 40px; background-color: #fafad2; padding: 12px 20px; border-radius: 16px; position: absolute; top: 50%; left: 50%; -webkit-transform: translateY(-50%) translateX(-50%); transform: translateY(-50%) translateX(-50%); font-size: 24px; color: #000000; margin: auto auto; z-index: 300001; white-space: nowrap; }
以下が抜けてた。
-webkit-transform: translateY(-50%) translateX(-50%); transform: translateY(-50%) translateX(-50%);
jQuery のソース
/** * fadeinmsg.js * * showFadeMessage(message , [options]) * * @param message メッセージ文字列 * @param option オプション(フェードイン時間等) * options = { fadein : フェードイン時間、ミリ秒 * , interval : 表示時間、フェードアウト開始までの時間、ミリ秒 * , fadeout : フェードアウト時間、ミリ秒 * , fontsize : 文字サイズ、font-size * } */ var showFadeMessage = function(msg, options){ var intime = 3000; var interval = 2000; var outtime = 3000; var fontoption = ""; if (!$.isEmptyObject(options)){ if (options['fadein'] != undefined){ intime = options['fadein']; } if (options['interval'] != undefined){ interval = options['interval']; } if (options['fadeout'] != undefined){ outtime = options['fadeout']; } if (options['fontsize'] != undefined){ fontoption = 'style="font-size: ' + options['fontsize'] + ';"'; } } $('body').prepend('<div id="fadeMessageModal"><div class="background"></div><div id="fadeMessage" class="container" ' + fontoption + '></div></div>'); $('#fadeMessage').html(msg); $('#fadeMessageModal').fadeIn(intime).delay(interval).fadeOut(outtime, function(){ $('#fadeMessageModal').remove(); }); };
使うサンプル
<script type="text/javascript"> $(function(){ $("button").click(function(){ showFadeMessage('<strong style="color:#ff0000;">警告!</strong>メッセージ<br/>ABCD', {fadein:100, interval:10000, fadeout:2000}); }); }); </script>