Title: Bootstrap Modals
Author: neilgee
Published: <strong>2014 年 6 月 18 日</strong>
Last modified: 2019 年 5 月 17 日

---

搜索插件

![](https://ps.w.org/bootstrap-modals/assets/banner-772x250.jpg?rev=985939)

**该插件尚未通过WordPress的最新3个主要版本进行测试**。 当与较新版本的WordPress一起
使用时，可能不再受到维护或支持，并且可能会存在兼容性问题。

![](https://ps.w.org/bootstrap-modals/assets/icon-256x256.jpg?rev=983429)

# Bootstrap Modals

 作者：[neilgee](https://profiles.wordpress.org/neilgee/)

[下载](https://downloads.wordpress.org/plugin/bootstrap-modals.1.3.2.zip)

 * [详情](https://cn.wordpress.org/plugins/bootstrap-modals/#description)
 * [评价](https://cn.wordpress.org/plugins/bootstrap-modals/#reviews)
 *  [安装](https://cn.wordpress.org/plugins/bootstrap-modals/#installation)
 * [开发进展](https://cn.wordpress.org/plugins/bootstrap-modals/#developers)

 [支持](https://wordpress.org/support/plugin/bootstrap-modals/)

## 描述

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.

### 用法

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

    ```
    <!-- Button trigger modal -->
    <a class="btn btn-primary btn-lg" href="#myModal1" data-toggle="modal">Launch demo 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">My Title in a Modal Window</h4>
                </div>
                <div class="modal-body">This is the body of a modal...</div>
                <div class="modal-footer">This is the footer of a modal...</div>
                </div><!-- /.modal-content -->
        </div><!-- /.modal-dialog -->
    </div><!-- /.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.

## 安装

This section describes how to install the plugin:

 1. Upload the `bootstrap-modals` folder to the `/wp-content/plugins/` directory
 2. 通过WordPress的“插件”菜单激活插件

Here is a simple HTML Modal MarkUp

    ```
    <!-- Button trigger modal -->
    <a class="btn btn-primary btn-lg" href="#myModal1" data-toggle="modal">Launch demo 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">My Title in a Modal Window</h4>
                </div>
                <div class="modal-body">This is the body of a modal...</div>
                <div class="modal-footer">This is the footer of a modal...</div>
                </div><!-- /.modal-content -->
        </div><!-- /.modal-dialog -->
    </div><!-- /.modal -->
    ```

## 评价

![](https://secure.gravatar.com/avatar/1db21927f52888eab0586b915ed203da3b958baa05c87ff086254b46695eee44?
s=60&d=retro&r=g)

### 󠀁[Good!](https://wordpress.org/support/topic/good-3777/)󠁿

 [ws24](https://profiles.wordpress.org/ws24/) 2018 年 9 月 7 日

Nice and easy WP plugin to display content in Bootstrap modals.

![](https://secure.gravatar.com/avatar/4553ddbdece7ace5ca411089f60a5cf1b011492f7ecfb63ab25f2cc6bd1daf90?
s=60&d=retro&r=g)

### 󠀁[Good plugin](https://wordpress.org/support/topic/good-plugin-2976/)󠁿

 [Bootstrap Themes](https://profiles.wordpress.org/bootstrapthemesio/) 2018 年 7
月 22 日

Very good plugin for WordPress.

![](https://secure.gravatar.com/avatar/1ec8e25c67db71b4411fb5c8d25f51361da8a958e51118b68d9f139911612c65?
s=60&d=retro&r=g)

### 󠀁[Слишком много багов](https://wordpress.org/support/topic/%d1%81%d0%bb%d0%b8%d1%88%d0%ba%d0%be%d0%bc-%d0%bc%d0%bd%d0%be%d0%b3%d0%be-%d0%b1%d0%b0%d0%b3%d0%be%d0%b2/)󠁿

 [fomenkoandrey](https://profiles.wordpress.org/fomenkoandrey/) 2017 年 3 月 13 
日

Работает не корректно: Основное окно прыгает по ширине из-за скролбара. Модальное
окно появившись мгновенно исчезает. Т.е. плагин не работоспособен.

![](https://secure.gravatar.com/avatar/0935186377e764dfc0c2a6ed8fed14ff53b40e82f86c983e065c5254558cc80c?
s=60&d=retro&r=g)

### 󠀁[goooood!](https://wordpress.org/support/topic/goooood-6/)󠁿

 [zanpress](https://profiles.wordpress.org/zanpress/) 2016 年 9 月 3 日

goooooood!!

![](https://secure.gravatar.com/avatar/5598de4ac5127fb40e9f117764dd79426b868dc5d245f9aca7938e5032db644f?
s=60&d=retro&r=g)

### 󠀁[Good Plugin and Simple to use.](https://wordpress.org/support/topic/good-plugin-and-simple-to-use/)󠁿

 [euginepj](https://profiles.wordpress.org/euginepj/) 2016 年 9 月 3 日

Good Plugin and Simple to use.

![](https://secure.gravatar.com/avatar/611900665681470879404da53d4d504fa73ade8b8183eb21d816e7c382cfddef?
s=60&d=retro&r=g)

### 󠀁[Super Duper](https://wordpress.org/support/topic/super-duper-7/)󠁿

 [baxaid](https://profiles.wordpress.org/baxaid/) 2016 年 9 月 3 日

Great plugin, does what it says.

 [ 阅读所有8条评价 ](https://wordpress.org/support/plugin/bootstrap-modals/reviews/)

## 贡献者及开发者

「Bootstrap Modals」是开源软件。 以下人员对此插件做出了贡献。

贡献者

 *   [ neilgee ](https://profiles.wordpress.org/neilgee/)

[帮助将「Bootstrap Modals」翻译成简体中文。](https://translate.wordpress.org/projects/wp-plugins/bootstrap-modals)

### 对开发感兴趣吗?

您可以[浏览代码](https://plugins.trac.wordpress.org/browser/bootstrap-modals/)，
查看[SVN仓库](https://plugins.svn.wordpress.org/bootstrap-modals/)，或通过[RSS](https://plugins.trac.wordpress.org/log/bootstrap-modals/?limit=100&mode=stop_on_copy&format=rss)
订阅[开发日志](https://plugins.trac.wordpress.org/log/bootstrap-modals/)。

## 更新日志

= 1.3.2
 * 17/11/17 * Update wp-color-picker to 2.1.2 to be compatible with WP 4.9

#### 1.3.1.1

 * 15th September 2017
 * Fix undefined notice
 * Compatible with WP 4.9

#### 1.3.1

 * 8th September 2017
 * Added option to disable plugins Bootstrap Files – handy if theme is already bootstrap.
 * Updated with Bootstrap 3.3.7
 * Updated CSS styles for custom CSS options in plugin settings, more specific selectors.
 * Option for alignment of header area of modal.

#### 1.3.0

 * 21st July 2016
 * Added options page in WP Admin Dashboard > Settings > Bootstrap Modal
 * Manual mark up tab
 * CSS style options enable the style of the CSS to be overidden
 * Shortcode now available – Shortcode tab – explains how the shortcode works

#### 1.2.1

 * 6th September 2015 – Updated with Bootstrap 3.3.5 – CSS change on close button
   to make circular and position offset off model

#### 1.2.0

 * 19th April 2015 – Updated with Bootstrap 3.3.4 – Fixes for a few significant 
   bugs in the Modal plugin.

#### 1.1.0

 * 22nd January 2015 – Updated with Bootstrap 3.3.2 – no functional changes for 
   modals.

#### 1.0.2

 * 13th November 2014 – Updated with Bootstrap 3.3.1 – https://github.com/twbs/bootstrap/
   releases/tag/v3.3.1 – Included extra CSS for .close class used on Modal close
   button.

#### 1.0.1

 * 27th June 2014 – Updated with Bootstrap 3.2.0 – https://github.com/twbs/bootstrap/
   releases/tag/v3.2.0

#### 1.0.0

 * Initial release.

## 额外信息

 *  版本 **1.3.2**
 *  最后更新：**7 年前**
 *  活跃安装数量 **1,000+**
 *  WordPress 版本 ** 3.8 或更高版本 **
 *  已测试的最高版本为 **5.2.24**
 *  语言
 * [English (US)](https://wordpress.org/plugins/bootstrap-modals/)
 * 标签
 * [bootstrap](https://cn.wordpress.org/plugins/tags/bootstrap/)[Modals](https://cn.wordpress.org/plugins/tags/modals/)
   [pop-ups](https://cn.wordpress.org/plugins/tags/pop-ups/)[windows](https://cn.wordpress.org/plugins/tags/windows/)
 *  [高级视图](https://cn.wordpress.org/plugins/bootstrap-modals/advanced/)

## 评级

 4.5 星（最高 5 星）。

 *  [  7 条 5 星评价     ](https://wordpress.org/support/plugin/bootstrap-modals/reviews/?filter=5)
 *  [  0 条 4 星评价     ](https://wordpress.org/support/plugin/bootstrap-modals/reviews/?filter=4)
 *  [  0 条 3 星评价     ](https://wordpress.org/support/plugin/bootstrap-modals/reviews/?filter=3)
 *  [  0 条 2 星评价     ](https://wordpress.org/support/plugin/bootstrap-modals/reviews/?filter=2)
 *  [  1 条 1 星评价     ](https://wordpress.org/support/plugin/bootstrap-modals/reviews/?filter=1)

[Your review](https://wordpress.org/support/plugin/bootstrap-modals/reviews/#new-post)

[查看全部评论](https://wordpress.org/support/plugin/bootstrap-modals/reviews/)

## 贡献者

 *   [ neilgee ](https://profiles.wordpress.org/neilgee/)

## 支持

有话要说吗？是否需要帮助？

 [查看支持论坛](https://wordpress.org/support/plugin/bootstrap-modals/)

## 捐助

您愿意支持这个插件的发展吗?

 [ 捐助此插件 ](https://www.paypal.com/cgi-bin/webscr?cmd=_donations&business=neil%40wpbeaches%2ecom&lc=AU&item_name=WP%20Beaches&item_number=Plugins&currency_code=USD&bn=PP%2dDonationsBF%3abtn_donateCC_LG%2egif%3aNonHosted)