【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を上手いことやると付けれるらしいが、
そんなことを先にやってまた不具合でたら嫌なので、
後回しにしようと思う。
一人での開発に限界を感じたので、
明日はメンターに相談します。
以上ありがとうございました。