<button id="openModalBtn">モーダルを開く</button>

<div id="myModal" class="modal">
  <p>モーダルウインドウ</p>
  <p>モーダルの内容です</p>
  <button id="closeModalBtn">OK</button>
</div>


const modal = document.getElementById('myModal');
const btn = document.getElementById('openModalBtn');

btn.addEventListener('click', function() {
  modal.style.display = 'block';
})
// 問題1. 閉じるボタンがクリックされたとき、モーダルウィンドウが非表示になる処理をJavaScriptで書いてください
const closeBtn = document.getElementById('closeModalBtn');

closeBtn.addEventListener('click', function() {
    modal.style.display = 'none';
})


document.getElementById()

document.addEventListener()

element.style

~~~javascript
document.getElementById($(1)).style.$(2) = $(3);
~~~

display: none

const modal = document.getElementById('myModal');
const btn = document.getElementById('openModalBtn');

btn.addEventListener('click', function() {
  modal.style.display = 'block';
})
// 問題1. 閉じるボタンがクリックされたとき、モーダルウィンドウが非表示になる処理をJavaScriptで書いてください
const closeBtn = 


モーダルを閉じる動作の設定

<button>

ボタンの設置

<div>

モーダルウィンドウの基本構造を作成

モーダルの非表示設定

clickイベント

display: block

モーダルを開く動作を作成

閉じるボタンの追加

position: fixed

left

transition

background-color

width

border

モーダルのデザインを追加

height

モーダルの背景のスタイル指定

event.target

window.onclick

モーダル以外をクリックで閉じる動作を追加

「モーダルウィンドウを作ろう」レッスンの総復習クイズです。

モーダルウィンドウを作ろうの総復習クイズ

モーダルウィンドウを作ろう

モーダルを閉じる動作の設定

まずは必要なスキルを確認しましょう！