【Railsでアプリ開発中】プログラミング初心者の勉強ブログ #30
こんにちは。
30日目。モーダルウィンドウについて仕組みを理解する。jQueryプラグインは使わないで実装。
学習内容
【オリジナルアプリ開発「免許学科試験学習アプリ」】
- jQuery基礎確認
- モーダルウィンドウの不具合修正
感想
今回もモーダルウィンドウについて学習しました。
前回jQueryのプラグインを利用してモーダルを実装したんですが、
【Rails】jQueryプラグインでフルスクリーンのモーダルウィンドウを表示【DIVE INTO CODE】
結局プラグインだとコーディングの理解が難しく、
一旦やり直すことに。
個人ブログで乗っていたコードを参考に1からモーダルウィンドウ実装の流れについて、
理解しようと思います。
参考にした記事
[ プログラミング ] jQueryでモーダルウィンドウを作る方法
ここに書いてあったコードを解読する。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>[DEMO]jQueryでモーダルウィンドウを作る方法</title>
<script src="js/jquery.js"></script>
<script>
$(function(){
// 「.modal-open」をクリック
$('.modal-open').click(function(){
// オーバーレイ用の要素を追加
$('body').append('<div class="modal-overlay"></div>');
// オーバーレイをフェードイン
$('.modal-overlay').fadeIn('slow');
// モーダルコンテンツのIDを取得
var modal = '#' + $(this).attr('data-target');
// モーダルコンテンツの表示位置を設定
modalResize();
// モーダルコンテンツフェードイン
$(modal).fadeIn('slow');
// 「.modal-overlay」あるいは「.modal-close」をクリック
$('.modal-overlay, .modal-close').off().click(function(){
// モーダルコンテンツとオーバーレイをフェードアウト
$(modal).fadeOut('slow');
$('.modal-overlay').fadeOut('slow',function(){
// オーバーレイを削除
$('.modal-overlay').remove();
});
});
// リサイズしたら表示位置を再取得
$(window).on('resize', function(){
modalResize();
});
// モーダルコンテンツの表示位置を設定する関数
function modalResize(){
// ウィンドウの横幅、高さを取得
var w = $(window).width();
var h = $(window).height();
// モーダルコンテンツの表示位置を取得
var x = (w - $(modal).outerWidth(true)) / 2;
var y = (h - $(modal).outerHeight(true)) / 2;
// モーダルコンテンツの表示位置を設定
$(modal).css({'left': x + 'px','top': y + 'px'});
}
});
});
</script>
<style>
.modal-content {
position:fixed;
display:none;
z-index:2;
width:50%;
margin:0;
padding:10px 20px;
border:2px solid #aaa;
background:#fff;
}
.modal-content p {
margin:0;
padding:0;
}
.modal-overlay {
z-index:1;
display:none;
position:fixed;
top:0;
left:0;
width:100%;
height:120%;
background-color:rgba(0,0,0,0.75);
}
.modal-open {
color:#00f;
text-decoration:underline;
}
.modal-open:hover {
cursor:pointer;
color:#f00;
}
.modal-close {
color:#00f;
text-decoration:underline;
}
.modal-close:hover {
cursor:pointer;
color:#f00;
}
</style>
</head>
<body>
<a data-target="con1" class="modal-open">リンク1</a>
<a data-target="con2" class="modal-open">リンク2</a>
<a data-target="con3" class="modal-open">リンク3</a>
<a data-target="con4" class="modal-open">リンク4</a>
<a data-target="con5" class="modal-open">リンク5</a>
<div id="con1" class="modal-content">
<p>リンク1の内容です。</p>
<p><a class="modal-close">閉じる</a></p>
</div>
<div id="con2" class="modal-content">
<p>リンク2の内容です。リンク2の内容です。リンク2の内容です。リンク2の内容です。リンク2の内容です。リンク2の内容です。リンク2の内容です。リンク2の内容です。リンク2の内容です。リンク2の内容です。リンク2の内容です。</p>
<p><a class="modal-close">閉じる</a></p>
</div>
<div id="con3" class="modal-content">
<p>リンク3の内容です。リンク3の内容です。リンク3の内容です。リンク3の内容です。リンク3の内容です。リンク3の内容です。リンク3の内容です。リンク3の内容です。リンク3の内容です。リンク3の内容です。リンク3の内容です。リンク3の内容です。リンク3の内容です。リンク3の内容です。リンク3の内容です。リンク3の内容です。</p>
<p><a class="modal-close">閉じる</a></p>
</div>
<div id="con4" class="modal-content">
<p>リンク4の内容です。リンク4の内容です。</p>
<p><a class="modal-close">閉じる</a></p>
</div>
<div id="con5" class="modal-content">
<p>リンク5の内容です。リンク5の内容です。リンク5の内容です。リンク5の内容です。リンク5の内容です。リンク5の内容です。リンク5の内容です。リンク5の内容です。リンク5の内容です。リンク5の内容です。リンク5の内容です。</p>
<p><a class="modal-close">閉じる</a></p>
</div>
<p>
スクロールしてみてください。モーダルウィンドウは固定されているのがわかるかと思います。<br>
↓<br>
・・・
終わり。
</p>
<p><a href="http://coolwebwindow.com/jquery-lab/archives/304"><< 記事に戻る</a></p>
</body>
</html>
とにかく<script>タグ内のJSの理解が必要。
以下の部分が、「modal-open」クラスを当てた部分のクリック時の設定になる。
「modal-open」クラスを当てた要素をクリックするとモーダルが開く。
<script>
$(function(){
$('.modal-open').click(function(){
$('body').append('<div class="modal-overlay"></div>');
$('.modal-overlay').fadeIn('slow');
var modal = '#' + $(this).attr('data-target');
modalResize();
$(modal).fadeIn('slow');
$('.modal-overlay, .modal-close').off().click(function(){
$(modal).fadeOut('slow');
$('.modal-overlay').fadeOut('slow',function(){
$('.modal-overlay').remove();
});
});
$(window).on('resize', function(){
modalResize();
});
function modalResize(){
var w = $(window).width();
var h = $(window).height();
var x = (w - $(modal).outerWidth(true)) / 2;
var y = (h - $(modal).outerHeight(true)) / 2;
$(modal).css({'left': x + 'px','top': y + 'px'});
}
});
});
</script>
まず最初から。
$(function(){
$('.modal-open').click(function(){
$('body').append('<div class="modal-overlay"></div>');
$('.modal-overlay').fadeIn('slow');
「append」メソッドは要素を追加できるメソッド。
これにより「'<div class=”modal-overlay”></div>’」という、
「modal-overlay」クラスを持ったdivを生成する。
この「modal-overlay」が、モーダルウィンドウの後ろの黒い背景にあたる。
$(‘.modal-overlay’).fadeIn(‘slow’);
により、クリック時に「modal-overlay」がfadeInアクションにより表示される。
「fadeIn」アクションは「要素の表示」に係るアクション。
jQueryでは他にも「show」や「toggle」などが、
要素表示アクションとして用意されている。
次、
var modal = '#' + $(this).attr('data-target');
modalResize();
$(modal).fadeIn('slow');
「modal」という変数を定義している。
これがモーダルのコンテンツ部分に該当する。
(this)は「.modal-open」を指す。
ここで、「modal-open」クラスを当てている要素を確認する。
<a data-target="con1" class="modal-open">リンク1</a> <a data-target="con2" class="modal-open">リンク2</a> <a data-target="con3" class="modal-open">リンク3</a> <a data-target="con4" class="modal-open">リンク4</a> <a data-target="con5" class="modal-open">リンク5</a>
これらである。
これらの要素には「data-target=”con1″」 のように、
全て「data-target」が設定されている。
この「data-target」引っ張ってきて、「modal」変数に格納している。
「attr」メソッドは、属性に値を設定する、または設定されている値を取得するメソッド。
頭のシャープで「id」としている。
「modalResize()」はモーダルの表示位置を設定するためのもの。
$(modal).fadeIn(‘slow’);
でオーバーレイ部分と同様に表示をさせる。
「slow」表示スピードの設定。
次が非表示部分の設定。
$('.modal-overlay, .modal-close').off().click(function(){
$(modal).fadeOut('slow');
$('.modal-overlay').fadeOut('slow',function(){
$('.modal-overlay').remove();
});
});
「modal-overlay」もしくは「modal-close」クラスを付与した要素を
クリックした際にモーダルを非表示にする設定。
$(window).on('resize', function(){
modalResize();
});
「window」表示画面を表す。「document」や「this」と同様に、
セレクタと同じ要領で使用が可能。
先ほど定義した「modalResize()」を、
表示画面の大きさに合わせてリサイズしている。
function modalResize(){
var w = $(window).width();
var h = $(window).height();
var x = (w - $(modal).outerWidth(true)) / 2;
var y = (h - $(modal).outerHeight(true)) / 2;
$(modal).css({'left': x + 'px','top': y + 'px'});
}
最後の部分。
ここで「modalResize()」のサイズ調整を行なっている。
また、「modal」が中心に来るように設定している。
とりあえず一通りなんとなくではあるが理解。
同じ関数をもう一個設定し、同じように「id」と「data-target」に注意してコーディングすれば、モーダルを二重にできそうだ。
表示成功。今回はモーダルが出たり出なかったりする不具合は生じてない。
表示アニメーションが「fadeIn」だと少し雰囲気にあっていない。
アニメーションはcssを上手いことやると付けれるらしいが、
そんなことを先にやってまた不具合でたら嫌なので、
後回しにしようと思う。
一人での開発に限界を感じたので、
明日はメンターに相談します。
以上ありがとうございました。