モーダルダイアログって便利(html,javascript,完成イメージ付き)

こんにちは、タクです。
今回はJavaScriptによるモーダルダイアログ表示コードまとめの投稿です。

レシピ検索アプリを例とした一覧表示からモーダル表示･非表示までのシンプルなコードです。

手軽にモーダル実装したい方はどうぞお使いください。

html

<!-- レシピ一覧を表示するコンテナ -->
<section>
  <div id="recipe-grid" class="row row-cols-1 row-cols-sm-2 row-cols-md-3 row-cols-lg-4 g-4">
    <!-- レシピのHTML挿入欄(JavaScript) -->
  </div>
</section>
    
<!-- レシピ詳細を表示するモーダルダイアログ -->
<dialog id="recipe-modal" class="rounded-3 shadow border-0 p-0">
    <div class="modal-content">
        <div class="modal-header border-bottom-0 pb-0">
            <button type="button" class="btn-close ms-auto" id="modal-close" aria-label="Close"></button>
        </div>
        <div class="modal-body text-center p-4">
            <img src="" alt="レシピ画像" id="modal-img" class="mb-3 rounded border"
            style="width: 100%; height: 200px; object-fit: cover;">
            <h2 id="modal-name" class="h4 fw-bold mb-2">料理名</h2>
            <div class="mb-3">
                <span id="modal-category" class="badge bg-success me-2">カテゴリ</span>
                <span id="modal-time" class="badge bg-secondary">調理時間</span>
            </div>
            <p id="modal-description" class="text-muted text-start mb-0">説明文がここに入ります。</p>
        </div>
    </div>
</dialog>

javascrit(処理)

// DOM要素の取得
const recipeGrid = document.getElementById('recipe-grid');
const modal = document.getElementById('recipe-modal');
const modalImg = document.getElementById('modal-img');
const modalName = document.getElementById('modal-name');
const modalCategory = document.getElementById('modal-category');
const modalTime = document.getElementById('modal-time');
const modalDescription = document.getElementById('modal-description');
const modalClose = document.getElementById('modal-close');

// まずはレシピの一覧表示です
function renderRecipes(recipes) {
    let htmlContent = '';
    for (let item of recipes) {
        htmlContent += `
            <div class="col">
                <div class="card h-100 text-center p-3 border-0 shadow-sm">
                    <img src="images/${item.img}" class="card-img-top rounded mx-auto mb-3" style="width: 100%; height: 150px; object-fit: cover;" alt="${item.name}">
                    <div class="card-body p-0 d-flex flex-column">
                    <h2 class="card-title fw-bold h5">${item.name}</h2>
                    <p class="card-text text-muted small mb-3">${item.time}</p>
                    <button type="button" class="btn btn-success btn-sm btn-detail mt-auto" data-id="${item.id}">詳しく見る</button>
                    </div>
                </div>
            </div>
        `;
    }
    recipeGrid.innerHTML = htmlContent;
}
// ページ読み込み時に全件表示
renderRecipes(recipeList);

// モーダルダイアログでの詳細表示機能。ボタンが押された時(recipeIdが存在する時)のみ表示します。
recipeGrid.addEventListener('click', (event) => {
const recipeId = event.target.dataset.id; 
if (recipeId) {
        for (let item of recipeList) {
            if (item.id == recipeId) {
                console.log(item);
                modalImg.src = `images/${item.img}`;
                modalName.innerText = item.name;
                modalCategory.innerText = item.category;
                modalTime.innerText = `⏱${item.time}`
                modalDescription.innerText = item.description;
            }
        }
        // モーダル表示
        modal.showModal();
    }
});
// モーダルを閉じる
modalClose.addEventListener('click', () => {
modal.close();
});

モーダルっていう言葉はフロントエンドの学習を始めるまでは知りませんでした。CSSのz-indexで細かな重なり調整等をする必要なく問答無用で最前面に表示してくれるとても便利なものです。

加えて、ついクリックしたくなるというユーザーの好奇心も誘ってくれます。

javascript(データ)

const recipeList = [
    {
        id: 1,
        name: '定番極上パスタ',
        category: '洋食',
        time: 50,
        img: 'recipe1.svg',
        description: '基本のミートソースから作る、家庭的で美味しい定番のパスタです。'
    },
    {
        id: 2,
        name: '洋風ハンバーグ',
        category: '洋食',
        time: 30,
        img: 'recipe2.svg',
        description: 'バジルとポン酢でさっぱりといただく洋風ハンバーグです。'
    },
    {
        id: 3,
        name: '海鮮スパゲティ',
        category: 'イタリアン',
        time: 40,
        img: 'recipe3.svg',
        description: 'エビやイカなどの魚介の旨味がたっぷり詰まったアルデンテ風スパゲティです。'
    },
// 「recipe〇.svg」画像は別途用意してimagesフォルダに入れておく必要があります。

▼上記コードの完成イメージです。

以前は関数内の引数にまだ未定義の文字列が入っていることの理解に結構苦しみました。上記コードでいえば「recipes」です。

要するに「外でどんな名前(変数名)で呼ばれていようが知ったこっちゃない。受け取る変数名は関数側で勝手に決めさせていただくぜ！」というもの。仮引数って面白いですよね。

今回は以上になります。