laravel後台 使用互動視窗/模態(modal) 實現CRUD

使用Bootstrap 版本5.x, laravel 版本8.x

互動視窗、模態，就是點按鈕時會彈出或滑出的一個小視窗。
下面先來看一個後台頁面。

這個頁面中，文章內容那個欄位裡面的文章內容按鈕，可以啟動互動視窗(modal)。
下面來看一下按他的效果。

這個是按按鈕啟動的互動視窗， 他是來自bootstrap5的code。 不過這個code如果只是單純貼上，然後只加入你要用的程式碼，會出現問題。 你會發現他只讀取到第一筆資料的內容， 不管你點哪一篇文章的按鈕，出現的都是第一筆資料的內容。

(點開看文章內容說了什麼)

文章內容說明了一個問題，為什麼會這樣呢，我們先來看看原始的程式碼。
另外附上bootstrap modal的頁面連結
官方英文版點我
六角學院中文版點我

@foreach ($newsuse as $item)
<!-- 這個按鈕用來啟動互動視窗(modal) -->
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">
  文章內容
</button>

<!-- 被啟動的互動視窗(Modal) -->
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        <!-- 下面是php的變數，可以把文章的內容帶進來網頁 -->
        {{$item->content}}
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">關閉</button>
        <button type="button" class="btn btn-primary">儲存(這裡沒用這個功能)</button>
      </div>
    </div>
  </div>
</div>
@endforeach

互動視窗(modal)的啟動機制是什麼呢？
它是由上面程式碼的第3行那個按鈕，裡面有一個data-bs-target="#exampleModal"
對應到程式碼第8行的div，它的id="exampleModal"，才能實現開啟。
如果我把按鈕的data-bs-target="#exampleModal"裡面的#exampleModal改成#aaaa，
變成data-bs-target="#aaaa"，因為沒有對應那個div的id，互動視窗(modal)就開不起來了。
為了實現每篇文章的按鈕，點了都可以看到內篇文章的內文，調整後的程式碼如下。

@foreach ($newsuse as $item)
<!-- 這個按鈕用來啟動互動視窗(modal) -->
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#xx{{$item->id}}">
  文章內容
</button>

<!-- 被啟動的互動視窗(Modal) -->
<div class="modal fade" id="xx{{$item->id}}" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        <!-- 下面是php的變數，可以把文章的內容帶進來網頁 -->
        {{$item->content}}
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">關閉</button>
        <button type="button" class="btn btn-primary">儲存(這裡沒用這個功能)</button>
      </div>
    </div>
  </div>
</div>
@endforeach

看得出來改了哪裡嗎?
按鈕裡面的data-bs-target="#xx{{$item->id}}"，
以及互動視窗中對應的div裡id="xx{{$item->id}}"，
然後要注意，id的前面不能是數字，所以才特地加xx的，
這個xx隨便你打，只要兩邊都一樣就可以，你也可以打ooo或rrrr。
總之，這樣就成功了。

tags: laravel laravel.8 bootstrap modal 後台 互動視窗