2011年12月13日火曜日

ブロガー(blogger)にモーダルダイアログの「leanModal」を設置してみました。

ブロガー(blogger)にモーダルダイアログの「leanModal」を設置してみました。軽いし、動きがシンプル、かつ、エレガント。良いかなと思ったら、IEでうまく動作しませんね。何故だろう? 本家では動いているんですが。できたら、後ほど調整します。IEを利用されている方、ごめんなさい。


クリック

STEP 1 「jquery.leanModal.min.js」の読み込み
<script type="text/javascript" src="jquery.leanModal.min.js"></script>
STEP 2 CSSの追加
#lean_overlay {
   position: fixed;
   z-index:100;
   top: 0px;
   left: 0px;
   height:100%;
   width:100%;
   background: #000;
   display: none;
}
#modal_message {
   width: 600px;
   padding: 30px; 
   display:none;
   background: #FFF;
   border-radius: 5px; 
   -moz-border-radius: 5px; 
   -webkit-border-radius: 5px;
   box-shadow: 0px 0px 4px rgba(0,0,0,0.7); 
   -webkit-box-shadow: 0 0 4px rgba(0,0,0,0.7); 
   -moz-box-shadow: 0 0px 4px rgba(0,0,0,0.7);
}
STEP 3 起動のためのJavaScriptの設置
$(function(){
    $('a[rel*=leanModal]').leanModal();
});
STEP 4 HTMLからリンク
<a href="#modal_message" id="go" rel="leanModal">クリック</a>

<div id="modal_message">
<p>メッセージ</p>
</div>
と言った具合です。

0 件のコメント:

コメントを投稿