JavaScriptでモーダルウィンドウを実装する方法 クリックで表示されるモーダルウィンドウの作り方を初心者向けにわかりやすく解説

モーダルウィンドウとは

モーダルウィンドウとは、画面上に重ねて表示されるポップアップのことです。
ユーザーの注意を引きたいときや、確認画面などによく使われます。

HTMLの基本構造

  

    
    
<button id="openModal">開く</button>

<div id="modal" class="modal">
  <div class="modal-content">
    <span id="closeModal">&times;</span>
    <p>ここに内容を表示</p>
  </div>
</div>
  

CSSの基本スタイル

  

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

.modal-content {
  background: #fff;
  padding: 20px;
  margin: 15% auto;
  width: 300px;
}
  

JavaScriptの実装

  

    
    
const openBtn = document.getElementById('openModal');
const closeBtn = document.getElementById('closeModal');
const modal = document.getElementById('modal');

openBtn.addEventListener('click', () => {
  modal.style.display = 'block';
});

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

応用ポイント

背景クリックで閉じる

ユーザー体験を向上させるために、背景クリックでも閉じるようにすると便利です。

アニメーションを追加する

CSSでフェードインなどを追加すると、より自然な動きになります。

まとめ

モーダルウィンドウは、シンプルなJavaScriptで簡単に実装できます。
ユーザーの操作性を高めるためにも、ぜひ取り入れてみてください。

ご相談・お見積もりは無料です。まずはお気軽にご連絡ください。

act styleでは、デザイン性はもちろん、表示速度やSEO対策にも配慮したレスポンシブWebデザインを標準仕様として採用していますので、パソコン・スマートフォン・タブレットなど、さまざまな端末から快適に閲覧できるホームページを制作いたします。

「ホームページの新規制作」「ホームページのリニューアル」どちらのご要望にも対応可能です。ホームページ制作に関するご相談やご質問なども、お気軽にお問い合わせください。

「まだ制作するか決まっていない」「まずは話だけ聞いてみたい」という場合でも大丈夫です。しつこい営業は一切ありません。どうぞお気軽にご相談ください。

• 
• 
•