bootstrap模態框有什么用

這篇文章主要介紹了bootstrap模態框有什么用，具有一定借鑒價值，需要的朋友可以參考下。希望大家閱讀完這篇文章后大有收獲。下面讓小編帶著大家一起了解一下。

bootstrap模態框可以用來創建模態窗口以豐富用戶體驗，或者為用戶添加實用功能；可在網站中顯示警告窗口、視頻、圖片、條款和條件，甚至社交媒體小部件等。模態框的目的是顯示來自一個單獨的源的內容，可在不離開父窗體的情況下提供信息和交互。

Bootstrap 模態框（Modal）是一個輕量級的多用途JavaScript彈出窗口，是覆蓋在父窗體上的子窗體。通常，目的是顯示來自一個單獨的源的內容，可以在不離開父窗體的情況下有一些互動；子窗體可提供信息、交互等。

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>
            <h5 class="modal-title" id="myModalLabel">Modal title</h5>
            </div>
            <div class="modal-body">
                <h4>Modal Body</h4>
            </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模態框有什么用內容對大家有幫助，同時也希望大家多多支持億速云，關注億速云行業資訊頻道，遇到問題就找億速云，詳細的解決方法等著你來學習!