針對bootstrap模態框的技術講解

最開始聽到模態是上個月寶哥電話面試我時，問我有無了解前端的模態。對於我一個新名詞我一臉懵比，讓寶哥提示一下，提示我說是介面的彈出框。 what ? 那用alter不就好了？ ？

 

上週主要在看前端的程式碼，寫得真是醜阿，註釋也沒寫多少…這是不好的…能不能多寫點註釋，求你了……

今天基本上了解了模態。

 

什麼是模態框

模態框（Modal）是覆蓋在父窗體上的子窗體。通常，目的是顯示來自單獨的來源的內容，可以在不離開父窗體的情況下有一些互動。子窗體可提供資訊、互動等。

例如下圖：你一點擊"開始示範模態框"，就會彈出一個框，我們稱這個框為模態框

#知道什麼模態框後，要如何動手寫一個html呢？費話不多說，先看了我的HTML程式碼：

76c82f278ac045591c9159d381de2c57100db36a723c770d327fc0aef2ce13b193f0f5c25f18dab9d176bd4f6de5d30e4d0d87937f6c83b675e896c64d3eb7c9b2386ffb911b14667cb8f0f91ea547a7Bootstrap 实例 - 模态框（Modal）插件6e916e0f7d1e588d4f442bf645aedb2fe16c25b0d3200e635c0f304555350fbb9c3bca370b5104690d9ef395f2c5f8d16c04bd5ca3fcae76e30b72ad730ca86dc1a436a314ed609750bd7c7d319db4da创建模态框（Modal）2e9b454fa8428549ca2e64dfac4625cd253e627dbc2fa01f6214037dd834a664e0279a115e9482989f7cd173365c28be开始演示模态框65281c5ac262bf6d81768915a4a77ac0a98392ec65c6437d6e4b9996f54b3546e15b84117b89cdc64f55f35a64be57a7522dee5a9e032a609c190d198a2bc97ab1f4a67446def6c49a9f0aa21517b1ac0b561c7c414147a96bbbb8cc10c3d06d887f586697bed160e742603972f4d96b×65281c5ac262bf6d81768915a4a77ac05912a214071c80b42e3c910ba38a34bf模态框（Modal）标题0f6dfd1e3624ce5465eb402e300e01ae16b28748ea4df4d9c2150843fecfba686e1ceff927595656120650f97442eabc在这里添加一些文本16b28748ea4df4d9c2150843fecfba68fcea287e1681f6566fd9116658b8e4f0cfd8c5dabb18f775a551e9cd264a3236关闭65281c5ac262bf6d81768915a4a77ac0c0da018427a22f22a069c7d690eece88提交更改65281c5ac262bf6d81768915a4a77ac016b28748ea4df4d9c2150843fecfba6816b28748ea4df4d9c2150843fecfba68e9f77224a0414652ba58ce8584e25a9616b28748ea4df4d9c2150843fecfba68e6b48cd5ccb66bf83010803e33e4e2d016b28748ea4df4d9c2150843fecfba6859971daa6ca9293695a67ea967cd049d2cacc6d41bbb37262a98f745aa00fbf0170100c9ec0ddde5c9387ce2ffa5e5032cacc6d41bbb37262a98f745aa00fbf0d1094dcf8be83095e506452d1d966621
    // 只需要点击 ESC 键，模态窗口即会退出。
    $(function() {
        $('#myModal').modal({
            keyboard: false
        })
    });
2cacc6d41bbb37262a98f745aa00fbf0-->3f1c4e4b6b16bbbd69b2ee476dc4f83a$(function() {
    $('#myModal').modal('hide')
});2cacc6d41bbb37262a98f745aa00fbf03f1c4e4b6b16bbbd69b2ee476dc4f83a$(function() {
    $('#myModal').on('hide.bs.modal',function() {
        alert('嘿，我听说您喜欢模态框...');
    })
});2cacc6d41bbb37262a98f745aa00fbf036cc49f0c466276486e50c850b7e495673a6ac4ed44ffec12cee46588e518a5e

於是你複製上面的程式碼，再在瀏覽器打開，發現了很醜，而且也實作不了彈出框的功能？這是為什麼呢？很有可能是因為你沒有導入bootstrap的css, js

#首先我從bootstrap官網下載bootstrap; 然後在html引用bootstrap的css和js

#如果你正確的導入，肯定是可以在瀏覽器看到這個介面的。

 

使用模態窗口，您需要有某種觸發器。您可以使用按鈕或連結。這裡我們使用的是按鈕。

• 如果您仔細查看上面的程式碼，您會發現在bb9345e55eb71822850ff156dfde57c8 標籤中，

  data-target="#myModal"

   是您想要在頁面上載入的模態框的目標。您可以在頁面上建立多個模態框，然後為每個模態框建立不同的觸發器。現在，很明顯，您不能在同一時間加載多個模組，但您可以在頁面上創建多個在不同時間進行加載。

• 在模態方塊中需要注意兩點：

• #第一是 

  .modal
，用來把dc6dce4a544fdca2df29d5ac0ea9906b 的內容辨識為模態框。

1. 第二是 .fade

    class。當模態框被切換時，它會造成內容淡入淡出。

2. aria-labelledby="myModalLabel"
，該屬性引用模態方塊的標題。

屬性 aria-hidden="true"

 用於保持模態視窗不可見，直到觸發器被觸發為止（例如點擊在相關的按鈕上） 。

699e085bcbc1be17121184de54cd6b00，modal-header 是為模態視窗的頭部定義樣式的類別。

class="close"

，close 是一個 CSS class，用來為模態視窗的關閉按鈕設定樣式。

data-dismiss="modal"

，是一個自訂的 HTML5 data 屬性。在這裡它被用來關閉模態視窗。

class="modal-body"

，是 Bootstrap CSS 的一個 CSS class，用來設定模態視窗的主體。

class="modal-footer"

，是 Bootstrap CSS 的一個 CSS class，用來設定模態視窗的底部樣式。

data-toggle="modal"

，HTML5 自訂的 data 屬性 data-toggle 用來開啟模態視窗。

 

方法

以下是一些可與 modal() 一起使用的有用的方法。

方法

描述實例##Options:把內容當作模態框啟動。接受一個可選的選項物件。 Toggle: 手動切換模態方塊。 Show:手動開啟模態方塊。 Hide:手動隱藏模態方塊。

.modal(options)

$('#identifier').modal({keyboard: false})

 .modal('toggle')

$('#identifier').modal('toggle')

 .modal('show')

$('#identifier').modal('show')

 .modal('hide')

$('#identifier').modal('hide')

 

事件

下表列出了模态框中要用到事件。这些事件可在函数中当钩子使用。

事件	描述	实例
show.bs.modal	在调用 show 方法后触发。	$('#identifier').on('show.bs.modal', function () { // 执行一些动作...})
shown.bs.modal	当模态框对用户可见时触发（将等待 CSS 过渡效果完成）。	$('#identifier').on('shown.bs.modal', function () { // 执行一些动作...})
hide.bs.modal	当调用 hide 实例方法时触发。	$('#identifier').on('hide.bs.modal', function () { // 执行一些动作...})
hidden.bs.modal	当模态框完全对用户隐藏时触发。	$('#identifier').on('hidden.bs.modal', function () { // 执行一些动作...})

 

参考资料：

Bootstrap 模态框（Modal）插件

模态框 modal.js

我把modal的练习放到Github上了：模态框

以上是針對bootstrap模態框的技術講解的詳細內容。更多資訊請關注PHP中文網其他相關文章！