3-12. Modal 互動視窗的設計

資料參考： Bootstrap說明網站(中) 、 w3schools(英) 、 RUNOOB(中)

複製Modal互動視窗的基本結構再加以修改

  <!-- 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>

設計點選影像時彈出 Modal 框，顯示對應的商品內容介紹

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事件
});