position: fixed

left

width

height

background-color

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

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

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

btn.addEventListener('click', function() {
  modal.style.display = 'block';
})

const closeBtn = document.getElementById('closeModalBtn');

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


/* 問題1. モーダルウィンドウを表示した時に、背景が暗くなるようにCSSを書いてください */
.modal {
  padding: 16px 32px;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: #fefefe;
  border: 1px solid #888;
  text-align: center;
  border-radius: 8px;
}

button {
  display: block;
  font-size: 20px;
  padding: 8px 16px;
  margin: 40px auto 0;
  background-color: #34b496;
  color: white;
  border: none;
  border-radius: 4px;
}

.modal_title {
  font-size: 24px;
}

.modal-background {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.4);
}


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

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

/* 問題1. モーダルウィンドウを表示した時に、背景が暗くなるようにCSSを書いてください */
.modal {
  display: none;
  padding: 16px 32px;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: #fefefe;
  border: 1px solid #888;
  text-align: center;
  border-radius: 8px;
}

button {
  display: block;
  font-size: 20px;
  padding: 8px 16px;
  margin: 40px auto 0;
  background-color: #34b496;
  color: white;
  border: none;
  border-radius: 4px;
}

.modal_title {
  font-size: 24px;
}


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

<button>

ボタンの設置

<div>

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

display: none

モーダルの非表示設定

document.getElementById()

clickイベント

element.style

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

display: block

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

閉じるボタンの追加

document.addEventListener()

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

transform

border

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

event.target

window.onclick

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

モーダルウィンドウの作成から表示管理まで、ユーザー体験を高めるウェブサイト機能を、JavaScriptによる操作で学びます。

webサイトに動きをつけたり、表示内容を切り替えたり、formの入力を制御するなど様々な処理について学んでいきます

JavaScript DOM操作コース

【実践🔥】DOM操作でUIアニメーションを実装しよう

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