# 模態對話框 創建擁有不同樣式和過渡形式的模態對話框。 ## 用法 模態對話框由一個遮罩層，一個對話框和一個關閉按鈕組成。 | Class類 | 描述 | | --- | --- | | `.uk-modal` | 添加這個類到一個 `&lt;div&gt;` 元素中創建對話框的容器和一個覆蓋在頁面上的空白遮罩層。為了能撥動這個元素，必須為它添加id。 | | `.uk-modal-dialog` | 為一個后代 `&lt;div&gt;` 元素添加這個類，創建對話框。 | | `.uk-modal-close` | 添加這個類到 `&lt;a&gt;` 或 `&lt;button&gt;` 元素，用來創建對話框中的關閉按鈕。推薦為按鈕添加 [關閉按鈕組件](close.html) 中的 `.uk-close` 類，以賦予適當的樣式，你也可以使用文字或者圖片。 | 你可以使用任意元素來觸發模態對話框。一個 `&lt;a&gt;` 元素需要鏈接到模態對話框的id 。為了使必要的JavaScript生效，需要添加 `data-uk-modal` 屬性。如果你使用的是其他元素，比如按鈕，只需要添加 `data-uk-modal="{target:'#ID'}"` 元素指向模態對話框的。 ### Example  # Headline Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. ### Markup ``` <!-- 觸發模態對話框的錨 --> <a href="#my-id" data-uk-modal>...</a> <!-- 觸發模態對話框的按鈕 --> <button class="uk-button" data-uk-modal="{target:'#my-id'}">...</button> <!-- 模態對話框 --> <div id="my-id" class="uk-modal"> <div class="uk-modal-dialog"> <a class="uk-modal-close uk-close"></a> ... </div> </div> ``` * * * ### JavaScript 選項 默認地，點擊遮罩層會自動關閉模態對話框。如果要阻止它，只需要添加 `data-uk-modal="{target:'#ID',bgclose:false}"` 屬性。 * * * ## 模態對話框的標題和腳注/Modal header and footer 你可以為模態對話框創建標題和腳注，使它們與正文內容分離開。只需要添加 `.uk-modal-header` 或者 `.uk-modal-footer` 類到模態對話內部的 `&lt;div&gt;` 元素即可。 ### Example  ### Markup ``` <div class="uk-modal"> <div class="uk-modal-dialog"> <div class="uk-modal-header">...</div> ... <div class="uk-modal-footer">...</div> </div> </div> ``` * * * ## 模態對話框的說明文字/Modal caption 你還可以為模態對話框創建一個顯示在它外部的說明文字。只需要天 `.uk-modal-caption` 類到模態對話框內部的 `&lt;div&gt;` 元素即可。 ### Example  ### Markup ``` <div class="uk-modal"> <div class="uk-modal-dialog"> <div class="uk-modal-caption">...</div> </div> </div> ``` * * * ## 燈箱修飾/Lightbox modifier 創建看起來像燈箱的模態對話框，只需要添加 `.uk-modal-dialog-lightbox` 類。如果你想要把圖片顯示在燈箱一樣的模態對話框中時，這會很有用。關閉按鈕會自動調整到對話框的相應位置。 ### Example  ### Markup ``` <!-- 觸發模態對話框的錨 --> <a href="#my-id" data-uk-modal>...</a> <!-- 模態對話框 --> <div id="my-id" class="uk-modal"> <div class="uk-modal-dialog uk-modal-dialog-lightbox"> <a href="" class="uk-modal-close uk-close uk-close-alt"></a> <img src="" alt=""> </div> </div> ``` 注意 在燈箱模態對話框中創建關閉按鈕時，我們依然推薦添加 [關閉組件](close.html) 中的 `.uk-close-alt` 類來賦予你的關閉按鈕一個適當的樣式。 * * * ## 空白模態框 重置所有樣式，比如padding和margin,添加 `.uk-modal-dialog-blank` 類名即可。如果你想創建全屏模態框時，可以使用它。此時，你還需要用到[效果組件](utility.html)中的 `.uk-height-viewport` 類名，使得模態框填充整個視口高度。 ### Example  ``` <!-- This is the anchor toggling the modal --> <a href="#my-id" data-uk-modal>...</a> <!-- This is the modal --> <div id="my-id" class="uk-modal"> <div class="uk-modal-dialog uk-modal-dialog-blank">...</div> </div> ``` * * * ## 模態對話框中的旋轉/Modal spinner 要在模態對話框中放入一個旋轉的圖標，添加 `.uk-modal-spinner` 類到模態對話框中的 `&lt;div&gt;` 元素即可。 ### Example  ### Markup ``` <div class="uk-modal"> <div class="uk-modal-dialog"> <div class="uk-modal-spinner">...</div> </div> </div> ``` * * * ## 居中模態對話框 垂直居中模態對話框，添加 `{center:true}` 選項到它的 data屬性即可。 ### Example  ### Markup ``` <a href="#my-id" data-uk-modal="{center:true}"></a> ``` * * * ## 大對話框修飾 為模態對話框添加與網頁相同的寬度，只需要添加 `.uk-modal-dialog-large` 類。 ### Example  ### Markup ``` <div class="uk-modal-dialog uk-modal-dialog-large">...</div> ``` * * * ## 模態對話框中溢出容器 你還可以把模態對話框的內容顯示在可滾動的容器中。只需添加 `.uk-overflow-container` 類到模態對話框中的 `&lt;div&gt;` 元素即可。模態對話框會自動擴展填充到頁面的高度。 ### Example  ### Markup ``` <div class="uk-modal-dialog"> <p>...</p> <div class="uk-overflow-container">...</div> <p>...</p> </div> ``` * * * ## 對話框 模態對話框組件還提供了原生對話框的選擇： window.alert, window.confirm 和 window.prompt. ### Example  ``` UIkit.modal.alert("Attention!"); ```  ``` UIkit.modal.confirm("Are you sure?", function(){ // 點擊OK確認后開始執行 }); ```  ``` UIkit.modal.prompt("Name:", value, function(newvalue){ // 點擊OK提交后執行 }); ```  ``` var modal = UIkit.modal.blockUI("Any content..."); // 使用 modal.hide() 解除屏蔽 ``` * * * ## JavaScript 你可以通過原生的Javascript處理模態對話框。 ### Example ``` var modal = UIkit.modal(".modalSelector"); if ( modal.isActive() ) { modal.hide(); } else { modal.show(); } ``` * * * ### 事件 每當模態對話框被打開時會觸發一次 `show.uk.modal` 事件，每當被關閉時會觸發一次 `hide.uk.modal` 事件。 ### Example ``` $('.modalSelector').on({ 'show.uk.modal': function(){ console.log("Modal is visible."); }, 'hide.uk.modal': function(){ console.log("Element is not visible."); } }); ``` ### 事件 | 名稱 | 參數 | 描述 | | --- | --- | --- | | `show.uk.modal` | event | 模態對話框顯示時 | | `hide.uk.modal` | event | 模態對話框隱藏時。 |