# laravel後台 使用互動視窗/模態(modal) 實現CRUD
#### 使用Bootstrap 版本5.x, laravel 版本8.x
:::info
互動視窗、模態，就是點按鈕時會彈出或滑出的一個小視窗。
下面先來看一個後台頁面。
:::
:::info
這個頁面中，文章內容那個欄位裡面的`文章內容`按鈕，可以啟動互動視窗(modal)。
下面來看一下按他的效果。
:::
:::spoiler
這個是按按鈕啟動的互動視窗， 他是來自bootstrap5的code。 不過這個code如果只是單純貼上，然後只加入你要用的程式碼，會出現問題。 你會發現他只讀取到第一筆資料的內容， 不管你點哪一篇文章的按鈕，出現的都是第一筆資料的內容。
:::
(點開看文章內容說了什麼)
:::info
文章內容說明了一個問題，為什麼會這樣呢，我們先來看看原始的程式碼。
另外附上bootstrap modal的頁面連結
[官方英文版點我](https://getbootstrap.com/docs/5.1/components/modal/)
[六角學院中文版點我](https://bootstrap5.hexschool.com/docs/5.1/components/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

:::info
互動視窗(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

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

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