Zenn
🔮

UIデザイン実装便利帳〜Javascript編 No1 シンプルなモーダルの作り方

2023/07/15に公開
JavaScript
Tailwind CSS
UI
uiデザイン実装便利帳
javascript編
tech

No1 シンプルなモーダルの作り方

HTML

html
<div class="containter m-5">
  <h1 class="text-2xl text-teal-500 font-bold">モーダルウインドウの生成</h1>
  <p class="mt-2 text-slate-600">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Dui id ornare arcu odio ut sem nulla pharetra diam. Risus viverra adipiscing
  </p>
  <div id="create-modal" class="mt-6 text-center">
    <span class="px-4 py-2 text-center text-white rounded-full bg-teal-500 hover:bg-teal-400 cursor-pointer">
     モーダル生成
    </spna>
  </div>
</div>

css

css(full)
.modal {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background-color: rgba(0,0,0,70%);
  cursor: pointer
}

.modal .inner {
  width: 300px;
  height: 250px;
  border-radius: 4px;
  background-color: white;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

css 1. 黒い半透明のモーダル背景用クラス.modalを追加

css(.modal)
.modal {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background-color: rgba(0,0,0,70%);
  cursor: pointer
}

css 2. モーダルのサイズと配置を指定クラス.modal .innerを追加

css(.modal .inner)
.modal .inner {
  width: 300px;
  height: 250px;
  border-radius: 4px;
  background-color: white;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

Javascript

Javascript
document.querySelector('#create-modal').addEventListener('click', displayModal)

function displayModal() {
  const modalEl = document.createElement('div');
  modalEl.classList.add('modal')
  const innerEl = document.createElement('div');
  innerEl.classList.add('inner')
  innerEl.innerHTML =`
  <div class="containter m-5">
    <h1 class="text-xl text-teal-500 font-bold">モーダルウインドウの中身</h1>
    <p class="mt-2 text-slate-600">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Dui id ornare arcu odio ut sem nulla pharetra diam. Risus viverra adipiscing
    </p>
  </div>
  `;
  modalEl.appendChild(innerEl);
  document.body.appendChild(modalEl);

  modalEl.addEventListener('click', () => {
    closeModal(modalEl);
  })
}

function closeModal(modalEl) {
  document.body.removeChild(modalEl);
}

作り方手順

1. createElementでmodalEL(モーダルの背景)とinnerEL(モーダルの中身)を生成

Javascript(function displayModal)
  const modalEl = document.createElement('div');
  modalEl.classList.add('modal')
  const innerEl = document.createElement('div');
  innerEl.classList.add('inner')

2. innerEL(モーダルの中身)にinnerHTMLでhtmlを挿入

Javascript(function displayModal)
  innerEl.classList.add('inner')
  innerEl.innerHTML =`
  <div class="containter m-5">
    <h1 class="text-xl text-teal-500 font-bold">モーダルウインドウの中身</h1>
    <p class="mt-2 text-slate-600">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Dui id ornare arcu odio ut sem nulla pharetra diam. Risus viverra adipiscing
    </p>
  </div>
  `

3. appendChildでmodalEL(モーダルの背景)とinnerEL(モーダルの中身)をbodyに配置

Javascript(function displayModal)
  modalEl.appendChild(innerEl);
  document.body.appendChild(modalEl);

4. function closeModalでモーダルを閉じる操作を追加

Javascript(function closeModal)
  modalEl.addEventListener('click', () => {
    closeModal(modalEl);
  })
  function closeModal(modalEl) {
   document.body.removeChild(modalEl);
  }

Discussion