Facebookライクなモーダルボックスを実装するスクリプト・Mikes Modal Library

Facebookライクなモーダルボックス
を実装するスクリプト、Mikes Modal
Libraryのご紹介。Facebookはもうや
ってないですけど、汎用的でいいの
では無いかなと。jQueryを使用しま
す。

汎用的なモーダルボックスです。jQueryのプラグインとなっています。

Mikes Modal Library

写真の脇にコメントするエリアがある、みたいなやつ。ボックス要素をモーダルウィンドウとして呼び出しています。コンテンツを注目させたい手法としてはベーシックなものですので割りと使用頻度は低くないのでは。

公式の動作サンプルです。

Sample

コード

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js" type="text/javascript"></script>
<script src="mikes-modal.min.js" type="text/javascript"></script>

jQueryのコアファイルとプラグインを読み込む。

$("#foo").click(function(e) {
          e.preventDefault();
          $(".bar").mikesModal();
        });

クリックイベントでモーダルを呼びだす。

珍しくは無いですけど、高機能じゃない方が使いやすくて重宝しますのでこういうのはありがたいです。ライセンスはMITとなっています。

Mikes Modal Library