[jQuery]ポップアップで出てくる「モーダル」を作成する

jqueryでポップアップででてくるモーダルの作成手順を紹介する。

モーダル表示に役立つ情報を共有。まずは手本のシンプルモーダルの完成形はこちら。

See the Pen simple modal by Shotaro Kamimura (@shotarokamimura) on CodePen.

1 jQueryの下準備
- 1.1 jQueryの内容について
2 モーダルウィンドウをヘッダーメニューに使用する
3 Codepenで学ぶ様々なmodal
4 HTML・CSSサイトの作り方の関連記事
5 コンピュータの全体像

jQueryの下準備

今回はjQueryを使用しているので、jQueryの埋め込みを忘れずに。

jQueryの内容について

$(function(){
    $('.modal-btn').on('click',function(){
        $('.js-modal').fadeIn();
        return false;
    });
    $('.modal-close-btn').on('click',function(){
        $('.js-modal').fadeOut();
        return false;
    });
});

について説明。

「$」は関数

jQueryにおいて「$()」は関数を指す。

on()「なんらかのイベント」が発生した時に何か処理をおこなうメソッド

書き方は下記のようになる。

対象要素.on( イベント名, セレクタ, データ ,関数 )

例えば下記の形なら、

 $('.modal-btn').on('click',function(){
        $('.js-modal').fadeIn();
        return false;
    });

イベント名→’click’
セレクタとデータ→なし
関数→ function() { … }

となる。

意味としては、「対象要素でクリックイベントが発生したら、function(){…}の中身を処理してね」と命令している。

今回の対象要素は、「.modal-btn」になるので、下記のコードが対象要素になる。

 <a class="modal-btn" href="">モーダルを表示</a>

fadeIn()は何かの要素フェードインさせるメソッド

fadeIn()は文字通り、何らかの要素をフェードインさせることはできる。

今回はセレクタを .js-modalに設定している。

よってHTMLでjs-modalで設定した下記の部分

<div class="modal js-modal">
        <div class="modal_background js-modal-close"></div>
        <div class="modal_content">
            <p>モーダルウィンドウ</p>
            <a class="modal-close-btn" href="">閉じる</a>
        </div>
    </div>

をフェードインさせることができる。

fadeOut()も同じような意味で、対象要素をフェードアウトさせることができる。