【Rails】モーダルウィンドウを1から理解して実装する

【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">&lt;&lt; 記事に戻る</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

 

$(‘.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を上手いことやると付けれるらしいが、

そんなことを先にやってまた不具合でたら嫌なので、

後回しにしようと思う。

試作

 

一人での開発に限界を感じたので、

明日はメンターに相談します。

 

以上ありがとうございました。

保存保存

返信を残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA