bootstrap模態框是用來做什麼的？

bootstrap模態方塊可以用來建立模態視窗以豐富使用者體驗，或為使用者新增實用功能；可在網站中顯示警告視窗、影片、圖片、條款和條件，甚至是社群媒體小工具等。模態框的目的是顯示來自單獨的來源的內容，可在不離開父窗體的情況下提供資訊和互動。

Bootstrap 模態方塊（Modal）是一個輕量級的多用途JavaScript彈出窗口，是覆蓋在父窗體上的子窗體。通常，目的是顯示來自單獨的來源的內容，可以在不離開父窗體的情況下有一些互動；子窗體可提供資訊、互動等。 【相關推薦：《bootstrap影片教學》】

Bootstrap 模態方塊（Modal）可自訂和響應式，可以使用它在網站中顯示警告視窗、影片和圖片。使用Bootstrap建立的網站可以使用模態框來顯示條款和條件（作為註冊過程的一部分），視頻，甚至社交媒體小部件。

Bootstrap 模態框可以用來建立模態視窗豐富使用者體驗，或是為使用者新增實用功能。您可以在 Modals（模態框）中使用 Popover（彈出框）和 Tooltip（工具提示外掛程式）。

Bootstrap 模態框主要分為三個部分：頭部（header），正文（body）和頁腳（footer）。

預設的模態方塊

預設的模態方塊如下所示：

要觸發模態框，你需要加入連結或按鈕。觸發元素的標記可能如下所示：

<a href="#" class="btn btn-lg btn-success" 
   data-toggle="modal" 
   data-target="#basicModal">Click to open Modal</a>

請注意，link元素有兩個自訂資料屬性：data-toggle和data-target。 toggle告訴Bootstrap要做什麼，target告訴Bootstrap要打開哪個元素。所以每當點擊這樣的連結時，都會出現一個id為「basicModal」的模態框。

現在讓我們看看定義模態框所需的程式碼：

<div class="modal fade" id="basicModal" tabindex="-1" role="dialog" aria-labelledby="basicModal" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
            <h4 id="Modal-nbsp-title">Modal title</h4>
            </div>
            <div class="modal-body">
                <h3 id="Modal-nbsp-Body">Modal Body</h3>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary">Save changes</button>
        </div>
    </div>
  </div>
</div>

模態框的父div應具有與上述觸發元素中使用的相同的ID。在我們的例子中是id="basicModal"。

注意：父模態框元素中自訂屬性aria-labelledby和aria-hidden讓其可被存取。讓所有人都能訪問你的網站是一個很好的做法，所以你應該使用這些屬性，因為它們不會對模態框的普通功能產生負面影響。

在模態框的HTML程式碼中，我們可以看到一個封裝div嵌套在父模態框div內。這個div的類別modal-content告訴bootstrap.js在哪裡找模態框的內容。在這個div內，我們需要放置前面提到的三個部分：頭部，正文和頁腳。

模態框頭部，顧名思義，用於為模態添加一個標題或如“x”關閉按鈕等其他元素。這些元素也應該有一個data-dismiss屬性告訴Bootstrap哪個元素要隱藏。

然後我們看一下模態框的正文。可以把它看做一個打開的畫布，你可以在其中添加任何類型的數據，包括嵌入YouTube視頻，圖像或任何其他內容。

最後，我們看一下模態框的頁腳。該區域預設為右對齊。在這個區域，你可以放置“保存”，“關閉”，“接受”等操作按鈕，這些按鈕與“模態框”需要表現的行為相關聯。

現在我們完成了我們的第一個模態框！你可以在我們的簡報頁面（https://codepen.io/SitePoint/pen/KkHyw）上查看。

使用jQuery啟動模態框

#模態框是一個jQuery插件，所以如果你想使用jQuery控制模態框的話，你需要在模態框的選擇器上呼叫.modal()方法。例如：

$('#basicModal').modal(options);

這裡的「options」是可以傳遞給自訂行為的JavaScript物件。例如：

var options = {
    "backdrop" : "static"
}

可用的option包括：

• backdrop：這可以是true或static。這定義你是否希望使用者能夠透過點擊背景來關閉模態。

• keyboard：如果設定為true則模態方塊將透過ESC鍵關閉。

• show：用於開啟和關閉模態方塊。它可以是true或false。

• remote：這是最酷的選擇之一。它可以用於使用jQuery的load()方法載入遠端內容。你需要在此選項中指定外部頁面。預設為false。

更多程式相關知識，請造訪：程式設計入門！ ！

以上是bootstrap模態框是用來做什麼的？的詳細內容。更多資訊請關注PHP中文網其他相關文章！