Title: Shift8 Modal
Author: shift8
Published: <strong>2016 年 6 月 17 日</strong>
Last modified: 2020 年 10 月 13 日

---

搜尋外掛

![](https://ps.w.org/shift8-modal/assets/banner-772x250.png?rev=2124766)

這個外掛**並未在最新的 3 個 WordPress 主要版本上進行測試**。開發者可能不再對這個
外掛進行維護或提供技術支援，並可能會與更新版本的 WordPress 產生使用上的相容性問題。

![](https://ps.w.org/shift8-modal/assets/icon-256x256.png?rev=2124766)

# Shift8 Modal

 由 [shift8](https://profiles.wordpress.org/shift8/) 開發

[下載](https://downloads.wordpress.org/plugin/shift8-modal.zip)

 * [詳細資料](https://tw.wordpress.org/plugins/shift8-modal/#description)
 * [使用者評論](https://tw.wordpress.org/plugins/shift8-modal/#reviews)
 *  [安裝方式](https://tw.wordpress.org/plugins/shift8-modal/#installation)
 * [開發資訊](https://tw.wordpress.org/plugins/shift8-modal/#developers)

 [技術支援](https://wordpress.org/support/plugin/shift8-modal/)

## 外掛說明

This plugin allows you to integrate the [animatedModal.js](http://joaopereirawd.github.io/animatedModal.js/)
and [Animated.css](http://daneden.github.io/animate.css/) library into your wordpress
installation. The plugin wraps the library into an easy to use shortcode that generates
the markup needed to implement the flyout full screen modals.

Using this plugin you should be able to create 100% custom animatedModal flyouts
and overlays. The shortcode pulls a page ID as a source of content. You can format
and style your content via WordPress’ built-in WYSIWYG editor. Further to that you
can style everything with the custom CSS classes that are generated by the shortcode.

## 螢幕擷圖

[⌊This is the trigger button. It can either be a  or a text a href link. Both options
will have CSS classes wrapping the modal trigger so you can style it however you
want.⌉⌊This is the trigger button. It can either be a  or a text a href link. Both
options will have CSS classes wrapping the modal trigger so you can style it however
you want.⌉[

This is the trigger button. It can either be a  or a text a href link. Both options
will have CSS classes wrapping the modal trigger so you can style it however you
want.

[⌊This is the flyout area. You can set the background color with the color shortcode
option. The option takes an HTML color code and applies it to the background of 
the modal window.⌉⌊This is the flyout area. You can set the background color with
the color shortcode option. The option takes an HTML color code and applies it to
the background of the modal window.⌉[

This is the flyout area. You can set the background color with the **color** shortcode
option. The option takes an HTML color code and applies it to the background of 
the modal window.

## 安裝方式

This section describes how to install the plugin and get it working.

e.g.

 1. Upload the plugin files to the `/wp-content/plugins/shift8-modal` directory, or
    install the plugin through the WordPress plugins screen directly.
 2. Activate the plugin through the ‘Plugins’ screen in WordPress
 3. Use the shortcode markup anywhere in your site

## 常見問題集

### What are the shortcode options?

An example shortcode would be the following :

    ```
    [shift8_modal post_id="1234" close_modal="CLOSE" call_modal="CLICK HERE" call_type="button" animatedIn="lightSpeedIn" animatedOut="bounceOutDown" color="#333333"]
    ```

### How can I style the markup?

You can either style the content that the shortcode pulls (page ID) by using the
built-in WordPress WYSIWYG editor or you can apply CSS styling to the custom classes
that are generated in the markup. There will be general “catch-all” CSS classes 
generated and custom per-shortcode classes that will allow you to style each markup
individually, or all at once.

### Can I use an icon or image for the close button?

This is planned for a future update of the plugin. Alternatively you can simply 
use the CSS class that is assigned to the close button area to inject font awesome
icons (or any icon pack) and remove the close text. For example :

<

pre>

### shift8-close-modal ::before {

content: ‘whatever’;
 }

### shift8-close-modal a {

display:none;
 }

### What are all the animation options?

You can visit the [Animate.css](http://daneden.github.io/animate.css/) page to view
all the animation options for the animatedIn and animatedOut options.

### What else have you done?

You can visit [our website](https://www.shift8web.ca) to see! 🙂

## 使用者評論

這個外掛目前沒有任何使用者評論。

## 參與者及開發者

以下人員參與了開源軟體〈Shift8 Modal〉的開發相關工作。

參與者

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

[將〈Shift8 Modal〉外掛本地化為台灣繁體中文版](https://translate.wordpress.org/projects/wp-plugins/shift8-modal)

### 對開發相關資訊感興趣？

任何人均可[瀏覽程式碼](https://plugins.trac.wordpress.org/browser/shift8-modal/)、
查看 [SVN 存放庫](https://plugins.svn.wordpress.org/shift8-modal/)，或透過 [RSS](https://plugins.trac.wordpress.org/log/shift8-modal/?limit=100&mode=stop_on_copy&format=rss)
訂閱[開發記錄](https://plugins.trac.wordpress.org/log/shift8-modal/)。

## 變更記錄

#### 1.0

 * Stable version created
 * Implemented short code options

#### 1.1

 * Added global container class that can be applied to all modal content instead
   of individually

#### 1.2

 * WordPress 5 compatibility

#### 1.3

 * WordPress 5.5 compatibility, fixed issue with IOS scrolling on modal content 
   containers.

## 中繼資料

 *  版本 **1.3**
 *  最後更新 **6 年前**
 *  啟用安裝數 **10+**
 *  WordPress 版本需求 ** 3.0.1 或更新版本 **
 *  已測試相容的 WordPress 版本 **5.5.19**
 *  語言
 * [English (US)](https://wordpress.org/plugins/shift8-modal/)
 * 標籤:
 * [flyout](https://tw.wordpress.org/plugins/tags/flyout/)[jquery](https://tw.wordpress.org/plugins/tags/jquery/)
   [modal](https://tw.wordpress.org/plugins/tags/modal/)[window](https://tw.wordpress.org/plugins/tags/window/)
 *  [進階檢視](https://tw.wordpress.org/plugins/shift8-modal/advanced/)

## 評分

這個項目尚無任何評論記錄。

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

[查看全部使用者評論](https://wordpress.org/support/plugin/shift8-modal/reviews/)

## 參與者

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

## 技術支援

使用者可在技術支援論壇提出意見反應或使用問題。

 [檢視技術支援論壇](https://wordpress.org/support/plugin/shift8-modal/)

## 贊助

想要支援這個外掛的發展嗎？

 [ 贊助這個外掛 ](https://www.shift8web.ca)