F2E合作社|modal燈箱效果|Bootstrap 5網頁框架開發入門


Posted by itiswonderfall on 2021-11-24

前言

modal 是阿拉丁,摩擦神燈後就可以召喚出強大、無所不能的精靈,想知道它還有什麼神奇魔力嗎?繼續看下去,帶你體驗 a whole new world 。

圖片來源

 


 

官方網站的 Modal 頁面

 

在開始使用導覽列之前,需要了解它們是如何運作

  • 互動視窗是用 HTML 、 CSS 和 JavaScript 建構的。它們位於文件中任何其他內容之上,並從 <body> 中刪除滾動,以便互動視窗的內容滾動。
  • 點擊互動視窗 backdrop 將自動關閉互動視窗。
  • Bootstrap 一次只支援一個互動視窗,因為認為巢狀互動視窗用戶體驗不佳。
  • 互動視窗使用 position: fixed ,在渲染呈現上會有點特別,盡可能將互動視窗 HTML 放置在頂級位置,以避免其他元素的潛在干擾,在另一個固定元素中內加入一個 .modal 的時候,你可能會遇到問題。
  • 由於 position: fixed ,在移動設備上使用互動視窗有一些附加說明,請參閱瀏覽器支援
  • 依據 HTML5 定義語義的方式, autofocus HTML 屬性 對 Bootstrap 互動視窗沒有影響,要達到同樣的效果,請使用一些自訂 JavaScript :
var myModal = document.getElementById('myModal')
var myInput = document.getElementById('myInput')

myModal.addEventListener('shown.bs.modal', function () {
  myInput.focus()
})

 


 

完整範例

通過點擊按鈕切換動態視窗呈現。它將從頁面頂部向下滑動並淡入。

<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">
    Launch demo modal
</button>


<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">Modal title</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <p>Modal body text goes here.</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary">Save changes</button>
            </div>
        </div>
    </div>
</div>

 


 

靜態背景

當將背景設置為靜態時,互動視窗不會因為點擊背景而關閉。

<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#staticBackdrop">
    Launch static backdrop modal
</button>

<div class="modal fade" id="staticBackdrop" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="staticBackdropLabel">Modal title</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                I will not close if you click outside me. Don't even try to press escape key.
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary">Understood</button>
            </div>
        </div>
    </div>
</div>

 


 

滾動長內容

如果內容太長的話是在頁面上捲動,但也可以透過在 .modal-dialog 中加入 .modal-dialog-scrollable 來創建一個 body 可滾動互動視窗。

<div class="modal-dialog modal-dialog-scrollable">
    ...
</div>

 


 

垂直置中

加入 .modal-dialog-centered 到 .modal-dialog 來使互動視窗垂直置中。

<div class="modal-dialog modal-dialog-centered">
    ...
</div>

 


 

使用網格

透過在 .modal-body 中加入 .container-fluid 於互動視窗中使用 Bootstrap 網格系統,然後像其他任何地方一樣使用正常的網格系統 class 。

<div class="modal-body">
    <div class="container-fluid">
        <div class="row">
            <div class="col-md-4">.col-md-4</div>
            <div class="col-md-4 ms-auto">.col-md-4 .ms-auto</div>
        </div>
        <div class="row">
            <div class="col-md-3 ms-auto">.col-md-3 .ms-auto</div>
            <div class="col-md-2 ms-auto">.col-md-2 .ms-auto</div>
        </div>
        <div class="row">
            <div class="col-md-6 ms-auto">.col-md-6 .ms-auto</div>
        </div>
    </div>
</div>

 


 

不同的互動視窗內容

使用 event.relatedTarget 和 HTML data-bs-* 屬性,可依據點擊按鈕來導入不同動態視窗的內容。

HTML

<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal" data-bs-whatever="@mdo">Open modal for @mdo</button>
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal" data-bs-whatever="@fat">Open modal for @fat</button>
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal" data-bs-whatever="@getbootstrap">Open modal for @getbootstrap</button>

<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">New message</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <form>
                    <div class="mb-3">
                        <label for="recipient-name" class="col-form-label">Recipient:</label>
                        <input type="text" class="form-control" id="recipient-name">
                    </div>
                    <div class="mb-3">
                        <label for="message-text" class="col-form-label">Message:</label>
                        <textarea class="form-control" id="message-text"></textarea>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary">Send message</button>
            </div>
        </div>
    </div>
</div>

JavaScript

<script>
    var exampleModal = document.getElementById('exampleModal')
    exampleModal.addEventListener('show.bs.modal', function (event) {
        // Button that triggered the modal
        var button = event.relatedTarget
        // Extract info from data-bs-* attributes
        var recipient = button.getAttribute('data-bs-whatever')
        // If necessary, you could initiate an AJAX request here
        // and then do the updating in a callback.
        //
        // Update the modal's content.
        var modalTitle = exampleModal.querySelector('.modal-title')
        var modalBodyInput = exampleModal.querySelector('.modal-body input')

        modalTitle.textContent = 'New message to ' + recipient
        modalBodyInput.value = recipient
    })
</script>

 


 

在互動視窗間切換

通過放置 data-bs-targetdata-bs-toggle 屬性,在多個互動視窗間切換。請注意不能同時打開多個互動視窗,這種方法只能在兩個單獨的模態之間切換。

下方案例,點選 Open second modal 即開啟第二個互動視窗。

<div class="modal fade" id="exampleModalToggle2" aria-hidden="true" aria-labelledby="exampleModalToggleLabel2" tabindex="-1">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalToggleLabel2">Modal 2</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                Hide this modal and show the first with the button below.
            </div>
            <div class="modal-footer">
                <button class="btn btn-primary" data-bs-target="#exampleModalToggle" data-bs-toggle="modal" data-bs-dismiss="modal">Back to first</button>
            </div>
        </div>
    </div>
</div>
<a class="btn btn-primary" data-bs-toggle="modal" href="#exampleModalToggle" role="button">Open first modal</a>

 


 

移除動畫

只需要在 .modal 中刪除 .fade ,即可移除淡入淡出的互動動畫。

 


 

親和性

務必請在 .modal 上添加 aria-labelledby="..." 來引用互動視窗標題,也可以在 .modal 上使用 aria-describedby 來描述你的動態視窗。請注意你不需要加上 role="dialog" ,因為 JavaScript 已經有添加了。

 


 

嵌入YouTube影片

在互動視窗上嵌入 YouTube 影片需要的 JavaScript 以自動停止重播或其他更多功能,欲了解更多請參閱 Stack Overflow 的文章

 


 

大小選項

互動視窗有三個可選的大小,通過修改 .modal-dialog 上的 class 就可以,這些尺寸會在部分中斷點調整,看起來會在較窄的視窗上出現水平捲軸。

尺寸 Class 最大寬度
.modal-sm 300px
默認 - 500px
.modal-lg 800px
特大 .modal-xl 1140px

<div class="modal-dialog modal-xl">...</div>
<div class="modal-dialog modal-lg">...</div>
<div class="modal-dialog modal-sm">...</div>

 


 

滿版互動視窗

跳出一個完全覆蓋用戶螢幕的互動,可以一直在 .modal-dialog 上視窗來支持。

Class 可用性
.modal-fullscreen ( 所有解析度皆全屏 ) 總是
.modal-fullscreen-sm-down ( sm 以下全屏 ) 576px 以下
.modal-fullscreen-md-down ( md 以下全屏 ) 768px 以下
.modal-fullscreen-lg-down ( lg 以下全屏 ) 992px 以下
.modal-fullscreen-xl-down ( xl 以下全屏 ) 1200px 以下
.modal-fullscreen-xxl-down ( xxl 以下全屏 ) 1400px 以下

 


 

參考資料

  1. Modal · Bootstrap v5.0
  2. 互動視窗 (Modal) · Bootstrap 5 繁體中文文件 - 六角學院 v5.0
  3. Modal光箱效果太Easy-金魚都能懂的Bootstrap5網頁框架開發入門 | 網頁開發 | 網頁教學

#f2e #F2E合作社 #bootstrap5 #網頁框架開發 #modal #燈箱







Related Posts

Day 47 - Amazon price tracker

Day 47 - Amazon price tracker

【單元測試的藝術】Chap 3: 透過虛設常式解決依賴問題

【單元測試的藝術】Chap 3: 透過虛設常式解決依賴問題

PWNLAB: INIT Walkthrough

PWNLAB: INIT Walkthrough


Comments