Title: Shift8 Modal
Author: shift8
Published: <strong>17 juin 2016</strong>
Last modified: 13 octobre 2020

---

Recherche d’extensions

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

Cette extension **n’a pas été testée avec plus de trois mises à jour majeures de
WordPress**. Elle peut ne plus être maintenue ou supportée et peut avoir des problèmes
de compatibilité lorsqu’elle est utilisée avec des versions de WordPress plus récentes.

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

# Shift8 Modal

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

[Télécharger](https://downloads.wordpress.org/plugin/shift8-modal.zip)

 * [Détails](https://fr.wordpress.org/plugins/shift8-modal/#description)
 * [Avis](https://fr.wordpress.org/plugins/shift8-modal/#reviews)
 *  [Installation](https://fr.wordpress.org/plugins/shift8-modal/#installation)
 * [Développement](https://fr.wordpress.org/plugins/shift8-modal/#developers)

 [Support](https://wordpress.org/support/plugin/shift8-modal/)

## Description

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.

## Captures d’écrans

 * [[
 * 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.

## Installation

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

## FAQ

### 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! 🙂

## Avis

Il n’y a aucun avis pour cette extension.

## Contributeurs/contributrices & développeurs/développeuses

« Shift8 Modal » est un logiciel libre. Les personnes suivantes ont contribué à 
cette extension.

Contributeurs

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

[Traduisez « Shift8 Modal » dans votre langue.](https://translate.wordpress.org/projects/wp-plugins/shift8-modal)

### Le développement vous intéresse ?

[Parcourir le code](https://plugins.trac.wordpress.org/browser/shift8-modal/), consulter
le [SVN dépôt](https://plugins.svn.wordpress.org/shift8-modal/), ou s’inscrire au
[journal de développement](https://plugins.trac.wordpress.org/log/shift8-modal/)
par [RSS](https://plugins.trac.wordpress.org/log/shift8-modal/?limit=100&mode=stop_on_copy&format=rss).

## Journal des modifications

#### 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.

## Méta

 *  Version **1.3**
 *  Dernière mise à jour **il y a 6 ans**
 *  Installations actives **10+**
 *  Version de WordPress ** 3.0.1 ou plus **
 *  Testé jusqu’à **5.5.18**
 *  Langue
 * [English (US)](https://wordpress.org/plugins/shift8-modal/)
 * Étiquettes
 * [flyout](https://fr.wordpress.org/plugins/tags/flyout/)[jquery](https://fr.wordpress.org/plugins/tags/jquery/)
   [modal](https://fr.wordpress.org/plugins/tags/modal/)[window](https://fr.wordpress.org/plugins/tags/window/)
 *  [Vue avancée](https://fr.wordpress.org/plugins/shift8-modal/advanced/)

## Évaluations

Aucun avis n’a encore été envoyé.

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

[Voir tous les avis](https://wordpress.org/support/plugin/shift8-modal/reviews/)

## Contributeurs

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

## Support

Quelque chose à dire ? Besoin d’aide ?

 [Voir le forum de support](https://wordpress.org/support/plugin/shift8-modal/)

## Faire un don

Souhaitez-vous soutenir l’avancement de cette extension ?

 [ Faire un don à cette extension ](https://www.shift8web.ca)