
內容簡介
此外掛將 Bootstrap v3 Modal 功能加入 WordPress。
它僅添加呈現網站的 Bootstrap Javascript Modal Plugin 和相關的 CSS。
此外掛沒有加載任何其他 Bootstrap javascirpt 或 CSS 功能。
readme.txt 中提供了選擇器和模態窗口目標元素的示例 HTML 標記代碼。
提供選項來覆蓋默認 CSS 模態樣式,並使用簡碼。
提供禁用 Bootstrap JS/CSS 檔案以解決衝突的選項。
使用方法
使用 Bootstrap API 標記或 Javascript 觸發模態窗口,可在此處找到:http://getbootstrap.com/javascript/#modals
此外,這裡還提供進一步的使用信息:http://coolestguidesontheplanet.com/bootstrap/modal.php
標記需要直接應用於文章/頁面或小工具區域,或通過簡碼進行應用。
提供覆蓋默認 CSS 樣式的選項。
以下是一個簡單的 HTML Modal 標記。
<!-- Button trigger modal -->
<a class="btn btn-primary btn-lg" href="#myModal1" data-toggle="modal">啟動演示 Modal</a>
<!-- Modal -->
<div id="myModal1" class="modal fade" tabindex="-1">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button class="close" type="button" data-dismiss="modal">×</button>
<h4 class="modal-title">我的標題在模態窗口中</h4>
</div>
<div class="modal-body">這是模態窗口的正文…</div>
<div class="modal-footer">這是模態窗口的頁腳…</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
您可以通過為 .modal-dialog div 添加額外的 CSS 類來更改模態窗口的大小:
modal-lg
或
modal-sm
分別針對大型和小型。
自版本 1.0.2 起,將附加額外的 CSS 以將關閉按鈕設置為類似 Bootstrap 安裝的狀態,要覆蓋關閉按鈕的默認 CSS,請在 CSS 樣式中使用 CSS 選擇器 .modal-dialog .close { }。
外掛標籤
開發者團隊
原文外掛簡介
This plugin adds Bootstrap v3 Modal functionality to WordPress.
It adds just the Bootstrap Javascript Plugin for Modals and associated CSS.
This does not bring in any other Bootstrap javascript or CSS functionality.
There is sample HTML mark up code in the readme.txt for a selector and modal target element.
Options to override the default CSS modal styling and also use a shortcode.
Option to disable Bootstrap JS/CSS files in case of conflict.
Usage
Use either the Bootstrap API markup or Javascript to trigger the modal windows, this can be found here: http://getbootstrap.com/javascript/#modals
There is also further usage information here: http://coolestguidesontheplanet.com/bootstrap/modal.php
Mark up needs to be directly applied to post/page or widget area or via a shortcode.
Options to override the default CSS styling.
Here is a simple HTML Modal MarkUp
Launch demo modal
You can change the modal size by adding an extra CSS class to the .modal-dialog div;
modal-lg
or
modal-sm
for large and small respectively.
Since version 1.0.2 extra CSS is included to set the close button to a state similar to Bootstrap install, to override the default CSS for the close button use a CSS selector .modal-dialog .close { } in your CSS styles.
