<!-- Modal --> <div class="modal fade" id="showModal" tabindex="-1" aria-labelledby="showModalLabel" aria-hidden="true"> <div class="modal-dialog modal-xl"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title" id="showModalLabel">Modal title</h5> <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button> </div> <div class="modal-body row"> <div class="col-12 col-md-7 imgarea"><img src="" alt=""></div> <div class="col-12 col-md-5"> <h3></h3> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloribus earum ab odit voluptate. Numquam doloribus natus laborum praesentium, consectetur at necessitatibus, aperiam cumque adipisci mollitia ex! Dolore iure doloribus nihil.</p> <p>Placeat sunt amet laudantium, praesentium minus recusandae enim quasi aperiam provident numquam? Tempore magnam sapiente quae, minus praesentium officiis necessitatibus rerum quod, similique odio esse? Cupiditate, totam! Sit, recusandae labore!</p> <p>Animi minus recusandae aliquid quos magni vel iure magnam? Nam, pariatur aut. Similique quibusdam incidunt et aliquid, optio voluptas ratione ea perspiciatis deleniti nostrum iusto dignissimos, ad vitae possimus dolores.</p> </div> </div> <button type="button" class="btn-close ms-auto p-4" data-bs-dismiss="modal" aria-label="Close"></button> </div> </div> </div> <button type="button" class="btn d-none showModal" data-bs-toggle="modal" data-bs-target="#showModal"></button>
JS 部份
//when #sec3 img click ============================================== $('#sec3 img').click(function () { var img_class = $(this).parents('.row').attr('data-class'); //紀錄了系列名稱 var img_b = $(this).attr('data-img'); //紀錄了目前商品的大圖檔名 var img_title = $(this).parent().text(); //取得商品名稱文字部份 $('.modal-title').text(img_class); //讓Modal的title區顯示系列名稱 $('.modal-body .imgarea img').attr('src', 'img/' + img_b); //讓Modal內左側影像區顯示出對應商品大圖 $('.modal-body h3').text(img_title); //讓Modal內右側的標題區顯示商品名稱 $('.showModal').trigger('click'); //讓彈出Modal框的按鈕觸發click事件 });