表示コンテンツの切り替えも出来るシンプルなモーダルウィンドウを実現するjQueryのスクリプト
シンプルなモーダルウィンドウを制作しました。有名なモーダルウィンドウに比べらたら出来ないことだらけです。画像をグループ化して他の画像へ移動することや、img内のtitleからキャプションを生成、他のHTMLを読み込んでの表示等もできません。その変わり3つのメリットがあります。
- 軽いこと。JSファイルにすると3K以下の軽さであり、画像を必要とせずCSSも普通に記述して20行程の導入のしやすさ。つまり気軽さ。
- シンプルなこと。見飽きた有名なモーダルウィンドウのインターフェイスに比べて何というシンプルさ、そう閉じるボタンを取り払うほどに。（※閉じるボタンが無くても、グレーバックをクリックすると閉じるコトを認識している人が増えていると、勝手に判断した為です。あとがきでこの事についてチョット書いていますので、興味があれば読んでみて下さい。）
- 表示コンテンツの切り替えができること。コレが本命。とっても気軽にモーダルウィンドウ内で表示コンテンツを切り替えることができます。まあいつもの如く、どこかにあるんでしょうけど、見つけられなかったので制作してみたパターンです。
っとまあ、無理やり3つのメリットをこじつけてみました。まあ興味を示した方はどうぞご覧下さいませ。
必要なファイル
対応ブラウザ
- Google Chrome
- Safari
- Firefox
- Internet Explorer7～
- Opera
※Windowsのみの確認です。また、Internet Explorer以外は記事投稿時の最新版を対象にした確認です。
コーディング＆設定
HTML
HTMLヘッダー内でjquery.jsを読み込む。
<script src="jquery.js" type="text/javascript"></script>
必要に合わせて以下1、2いずれかの様に記述。
1.画像の表示
モーダルウィンドウを立ち上げるa要素にclass="modal"を設定し、hrefに表示させる画像（以下の場合はsample_l.gif）を設定する。
<p><a class="modal" href="sample_l.gif"><img src="sample.gif" alt="" /></a></p>
2.ページ内要素の表示
モーダルウィンドウを立ち上げるa要素にclass="modal"を設定し、hrefに表示させるページ内要素のidを（以下の場合は#sample1）を設定する。
また、モーダルウィンドウを閉じる要素にclass="modal-close"を設定する。
あと、モーダルウィンドウを立ち上げたまま表示するページ内要素を変更するには、a要素にclass="modal-move"を設定し、hrefに表示させるページ内要素のidを（以下の場合は#sample1、#sample2）を設定する。
モーダルウィンドウ表示用のページ内要素（以下の場合は#sample1、#sample2）はCSSの設定でdisplay:none;にして非表示にしておく。
<p><a class="modal" href="#sample1">テキスト</a></p> <!-- CSSで非表示に設定 --> <div id="sample1"> <p>モーダルウィンドウ表示用のページ内要素1</p> <p><a class="modal-move" href="#sample2">次のコンテンツへ</a></p> <p><a class="modal-close" href="#">閉じる</a></p> </div> <div id="sample2"> <p>モーダルウィンドウ表示用のページ内要素2</p> <p><a class="modal-move" href="#sample1">前のコンテンツへ</a></p> <p><a class="modal-close" href="#">閉じる</a></p> </div> <!-- //CSSで非表示に設定 -->
CSS
以下のCSSを記述。さり気なくbox-shadow使っているので微妙にIEでは表示が違います。
あと以下には記述していませんが、DEMOではborder-radiusとか使って遊んでます。見て分かると思いますが、簡単な記述なので気軽にカスタム出来ると思います。
#modal-win {
width: 100%;
position: absolute;
}
#modal-win-inner {
box-shadow: 0 0 5px rgba(0, 0, 0, .25);
margin: 0 auto;
position: relative;
z-index: 101;
}
#modal-bg {
width: 100%;
height: 100%;
background-color: #000000;
position: fixed;
top: 0;
left: 0;
z-index: 100;
cursor: pointer;
}
JavaScript
以下のスクリプトを記述。9行目でアニメーション速度を変更できます。
(function($){
$(function(){
simpleModalWindow();
});
function simpleModalWindow(){
var sp = 500; //アニメーション速度
var win = $(window);
var body = $('body');
var bg = $('<div id="modal-bg"></div>');
bg.css('opacity', '0');
//モーダルウィンドウ表示クリックイベント
$(document).on('click', '.modal', function(){
var py = win.scrollTop();
var wh = win.height();
var self = $(this);
var link = self.attr('href');
var check = link.match(/^#.+/);
var mWin = $('<div id="modal-win"><div id="modal-win-inner"></div></div>');
var mInner = mWin.find('#modal-win-inner');
mInner.css('opacity', '0');
body.append(mWin);
mWin.prepend(bg);
if(!check){
mInner.append('<img src="' + link + '" alt="" />');
var img = mWin.find('img');
img.on('load', function(){
view(img);
});
}
else {
var contents = $(link);
mInner.append(contents);
contents.css({display: 'block', zIndex: '101'});
view(contents);
}
function view(a_elm){
var w = a_elm.outerWidth();
var h = a_elm.outerHeight();
var mt = (wh - h) / 2 + py;
bg.animate({opacity: '.75'}, sp);
mWin.css('top', mt + 'px');
mInner.css({width: w, height: h}).animate({opacity: '1'}, sp);
}
return false;
});
//モーダルウィンドウ内要素変更クリックイベント
$(document).on('click', '.modal-move', function(){
var py = win.scrollTop();
var wh = win.height();
var self = $(this);
var link = self.attr('href');
var check = link.match(/^#.+/i);
var mWin = $('#modal-win');
var mInner = mWin.find('#modal-win-inner');
if(check){
mInner.animate({opacity: '0'}, sp, function(){
var nowContents = $(this).children();
body.append(nowContents);
nowContents.hide();
var contents = $(link);
mInner.append(contents);
contents.css({display: 'block', zIndex: '101'});
var w = contents.outerWidth();
var h = contents.outerHeight();
var mt = (wh - h) / 2 + py;
bg.animate({opacity: '.75'}, sp);
mWin.css('top', mt + 'px');
mInner.css({width: w, height: h}).animate({opacity: '1'}, sp);
});
}
return false;
});
//モーダルウィンドウクローズクリックイベント
$(document).on('click', '#modal-bg, .modal-close', function(){
var mWin = $('#modal-win');
var mInner = mWin.find('#modal-win-inner');
var contents = mInner.children();
mInner.animate({opacity: '0'}, sp, function(){
if(contents.attr("id")){
body.append(contents);
contents.hide();
}
mWin.remove();
});
bg.animate({opacity: '0'}, sp);
return false;
});
}
})(jQuery);
※2012/5/31 表示コンテンツを2重に囲わないといけない場合がある為、もっとシンプルにHTMLを記述できると思い、上記スクリプトを修正しました。
※2012/5/14 ページ内要素の表示にclone()を使っていた為、idの重複等による不具合が出る可能性がありましたので、上記スクリプトを修正しました。
あとがき
はじめの方で書いたモーダルウィンドウの閉じるボタンを取り払った理由についてもう少し詳しく、そして自己中心的考えで3つにまとめて書きます。
- 上記にあるように、グレーバックをクリックすると閉じるコトを認識している人が増えていると思った為。思った理由は各々考えてくれ。
- 閉じるボタン小さい。グレーバック大きい。以上。
- 人類の進化とインターフェイスの簡略化。2つ目の示す通り圧倒的に押しやすく使いやすいのはグレーバックのクリックだと思う。なぜ閉じるボタンが用意されているのだろうか？それは分かりやすさ、つまりユーザビリティを高める為だろう。だが、押しやすさとういう点ではグレーバックの方がユーザビリティが高いと言える。だから両方用意する。ということだろう。しかし、閉じるボタンを用意することで、圧倒的押しやすさを持つグレーバックに気づかないユーザーもいるかも知れない。そこで、あえてユーザーに小さな壁、つまり閉じるボタンが無い状態を乗り越えさせるのである。その壁を乗り越えることは恐らく容易いことだろう。つまりその壁を乗り越えるコトこそが人類の進化である。多くの人々が進化することで、インターフェイスの簡略化につながる。この場合はグレーバック＝閉じるボタンの認識を人類に植えつけることだ。そしてそうなった人類にとって簡略化されたインターフェイスはより直感的なモノとなり、今以上に分かりやすく使いやすいモノとなるだろう。
っとまあ、特に3つ目ですが妄想ワールド全開で閉じるボタンを取り払った理由をこじつけて参りましたが、今回はココまでにします。ではまた次回の記事で。
Comment
これいいですね。
理由もユーザーに認知されつつあるからという簡潔さがグッドです。
BBさん。
いやぁ、画象の表示はオマケで作った感じでしたので、閉じるボタンを作らなかった言い訳だったりするんですけどね。
でもこうやってご感想を頂けると今後の参考になります。ありがとう御座います。
はじめまして。
確かに「閉じる」は面積的に・・・ってカンジですね♪
是非使いたいスクリプトですね。
glennさん。はじめまして。
自分が小さい閉じるボタンを押すことがあまりないのと、付けるのを面倒くさがった結果がこれです。
このスクリプトはモーダルウィンドウ上で進む選択式のコンテンツ、例えば簡単なクイズ等には便利だと思います。