フェードイン、フェードアウトするメッセージ(改編）

昔、フェードイン、フェードアウトするメッセージの jQuery を書いた。
見直すと中央寄せが中途半端でできていない。書き直す。

ＣＳＳソース

@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>