モーダルを作成してみたので、手順を整理する。
完成形はこちら。
jQueryの下準備
jQueryを読み込むための準備は別途下記にて整理した。
[jQuery] jQueryを使う際の下準備
jQueryを使う時に必要な下準備を整理する。
モーダルを準備する
まずは表示するためのモーダルを準備する。
<div class="modal-wrapper">
<div class="modal-menu">
<ul>
<li>menu1</li>
<li>menu2</li>
<li>menu3</li>
</ul>
</div>
</div>
CSSでwrapper部分にz-indexをつけることで、他の要素より上に表示させる。
.modal-wrapper {
background-color: rgba(0, 0, 0, 0.6);
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 2;
}
.modal-menu{
color:white;
height:900px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
.modal-menu li{
list-style: none;
font-size:30px;
}
下記表示結果。モーダルの下の背景要素のHTML・CSSは今回省略している。

モーダルの表示が確認できたら、wrapper部分にdisplay:none;を記述して、一時モーダルを表示しないようにさせる。
.modal-wrapper {
background-color: rgba(0, 0, 0, 0.6);
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 2;
display:none;
}
clickイベントを作成して、クリックした時にモーダルを表示
次にメニューボタンを準備し、jQueryでclickイベントを作る。
ヘッダーとメニューボタン用意
まずはヘッダーとメニューボタン用意
fontawesomeを今回は使用した。
<!--fontawesomeをhead部分で読み込む >
<header>
<i class="fas fa-bars fa-2x"></i>
</header>

clickイベントを用意する
clickイベントをscript.jsにて用意する。
まずはHTMLにて、ボタンアイコン部分に「id="menu-show"」を設定し、script.jsのクリックイベントでidを指定できるようにする。
<header>
<i class="fas fa-bars fa-2x" id="menu-show"></i>
</header>
<body>
<div class="modal-wrapper">
<div class="modal-menu">
<ul>
<li>menu1</li>
<li>menu2</li>
<li>menu3</li>
</ul>
</div>
</div>
次はscript.jsの記述。
「#menu-show」がクリックされた時に、「.modal-wrapper」がフェードインする、という形で記述する。
$(function() {
$('#menu-show').click(function(){
$('.modal-wrapper').fadeIn();
});
});
すると、クリックした時に、モーダルが表示される。
ただし現段階では、モーダルが表示されるだけで、また隠すことができないので、今度は隠す処理を記述する。
モーダルを隠す
次はモーダルを隠す処理に入る。
×アイコンを表示
戻るアイコンだとわかりやすくするため、別アイコンをfont-awesomeで読み込む。
アイコンは、modal-wrapperの中に入れる。
今回はわかりやすく、リストに入れた。
script.jsでアイコンにclickイベントをつけれるように、「id="menu-close"」も追加。
<div class="modal-wrapper">
<div>
</div>
<div class="modal-menu">
<ul>
<li id="menu-close"><i class="fas fa-window-close"></i></li>
<li>menu1</li>
<li>menu2</li>
<li>menu3</li>
</ul>
</div>
</div>
script.jsでは先程のfadeIn()のクリックイベントに加え、fadeOut()のクリックイベントも追加。
「#menu-close」がクリックされた時に、「.modal-wrapper」がフェードインする、という形で記述する。
$(function() {
$('#menu-show').click(function(){
$('.modal-wrapper').fadeIn();
});
$('#menu-close').click(function(){
$('.modal-wrapper').fadeOut();
});
});
完成。