トップ > jQuery > 簡単なモーダルをjQueryで実装する流れ

簡単なモーダルをjQueryで実装する流れ

jQuery

 モーダルとは

例えば、Twitterの投稿ボタンを押すと・・・

f:id:khirok:20200201204744p:plain

こうなります。

 

これが、"モーダル"です。

 

この記事では、このような"モーダル"を筆者の環境(Mac OS)で1から実装していく過程を公開します。

実装手順

フォルダなどを準備する

ターミナルを開き、ホームディレクトリに「modal」というフォルダを作成します。

f:id:khirok:20200201205246p:plain

modalディレクトリに移動します。

f:id:khirok:20200201205257p:plain

html、css、jQueryを記述するためのファイルを作成します。

f:id:khirok:20200201205642p:plain

念のため、作成できているか確認しておきます。

f:id:khirok:20200201205752p:plain

OKです！

 

VS codeで、modalフォルダを開きます。

f:id:khirok:20200201210006p:plain

ブラウザに最低限の表示をさせる

modal.htmlを編集します。

<!DOCTYPE html>
<head>
　<meta charset="UTF-8">
　<link rel="stylesheet" href="modal.css">
</head>
<dody>
　<h1>モーダル</h1>
</dody>

ひとまずここまで記入します。

 

Chromeで、新規タブを ⌘ + T で開き、⌘ + O で modalフォルダ内のmodal.htmlを開きます。

f:id:khirok:20200201210716p:plain

ブラウザはこうなっています。

f:id:khirok:20200201210816p:plain

少し寂しいので、背景画像を指定します。

フリー画像がダウンロードできるPixabay (https://pixabay.com/ja/ )でMacbookと検索して手に入れた画像をmodalフォルダに配置します。

f:id:khirok:20200201211446p:plain

 

modal.cssを編集します。

body {
　background-image: url("macbook-336704_1920.jpg");
　background-size: cover;
}

 

ここまでで、ブラウザはこんな感じになっています。

f:id:khirok:20200201211621p:plain

モーダルの中身を作り込んでいく 

次に、モーダルの中身を実装します。(modal.html)

<div class="modal-contents">
　<h1>モーダル</h1>
</div>

「モーダル」という文字をdivで囲いました。

 

modal-contentsにプロパティと値を設定します。(modal.css)

.modal-contents {
margin: 100px auto;
text-align: center;
height: 100px;
width: 300px;
background-color: #fff;
padding: 20px;
border: 1px solid black;
border-radius: 20px;
}

 

これで、少しだけモーダルに近づきました !

この記事では、これを表示・非表示にさせます。

f:id:khirok:20200201212412p:plain

モーダルをカバーしている部分を作り込んでいく

モーダルの背景を実装していきます。

先ほどのdivを、さらに別のdivで囲います。(modal.html)

<div class="modal-wrapper">
<div class="modal-contents">
　<h1>モーダル</h1>
</div>
</div>

 

モーダルの背景っぽくcssを適応させます。

.modal-wrapper {
　background-color: rgba(0,0,0,0.7);
　position: fixed;
　top: 0;
　right: 0;
　left: 0;
　bottom: 0;
}

 

こんな感じになりました！

f:id:khirok:20200201212945p:plain

モーダルを表示させる 

さてここからは、jQueryを編集していきます。

</script>
 
<script src="modal.js"></script>

この2行をmodal.htmlのheadタグ内に追記します。

jQueryを使う宣言をして、自分で作成したjQueryのファイル(この記事では、modal.js)を読み込んでいます。

 

続いて、modal.jsを編集します。

$(function(){
alert('OK');
})

この記述をしてブラウザをリロードした時に・・・・

f:id:khirok:20200201213521p:plain

このような表示が出てこれば、jQueryが正しく読み込めています。

alert('OK'); は消しておきます。

 

次に、モーダルをデフォルトで非表示にするために、modal.cssの.modal-wrapperに

　display: none;

を追記します。

 

さて、modal.jsを編集していきましょう。

$(function(){
　$('html').click(function(){
　alert('OK');
})
})

画面のどこかをクリックした時にjQueryが反応するようにしました。

先ほどと同じように、OKのポップアップが出ることを確認して、alert('OK')を消去します。

$(function(){
　$('html').click(function(){
　　$('.modal-wrapper').fadeIn();
})
})

alert('OK')のあった箇所にこの記述をします。

 

ブラウザのどこかをクリックするとモーダルが表示されます。

f:id:khirok:20200201214527p:plain

                                                        　　クリック前

 

 

f:id:khirok:20200201215013p:plain

　　　　　　　　　　　　　　　　　クリック後 

モーダルを非表示にする

ここからは、モーダルを非表示にしていきます。

まずmodal.jsに、

$('.modal-contents').click(function(){
　$('.modal-wrapper').fadeOut();
})

を追記します。

これにより、モーダル部分をクリックしたらモーダルが消えるようになりましたが、

モーダルを表示するイベントが、"画面全体をクリックした時"と指定してしまっていたため、表示・非表示が繰り返し起こるという自体が起こってしまいました。

$('html').one('click', function(){
　$('.modal-wrapper').fadeIn();
});

そこで、

1回だけイベントが発生するoneメソッドを使用しました。

→参考サイト (https://pisuke-code.com/jquery-execute-event-only-once/) 

$(function(){
 
$('html').one('click', function(){
$('.modal-wrapper').fadeIn();
});
 
$('.modal-contents').click(function(){
$('.modal-wrapper').fadeOut();
})
 
})

                                                                             modal.js

これで、ひとまず画面をクリックしたらモーダルが表示され、モーダルをクリックしたら非表示になるという動作を実装することができました。

f:id:khirok:20200201220626p:plain

　　　　　　　　　　　　　　　画面をクリックした後

 

f:id:khirok:20200201220715p:plain

　　　　　　　　　　　　　　モーダルをクリックした後

 

以上、簡単ですがモーダルを実装する流れについて書きました。