Foundation-sites: Révéler le positionnement modal ?

Avez-vous un lien pour que nous puissions vous aider à comprendre ce qui se passe?

Laissez-moi l'installer et l'exécuter où vous pouvez le voir, puis je vous enverrai un message avec les informations de connexion.

Ok, je t'envoie les détails en message privé.

Je pense que vous avez défini une règle dans votre css .column, .columns {position: relative;}

Le modal de révélation est positionné en absolu. Je ne sais pas pourquoi il n'est pas positionné fixe. Peut-être pour activer le défilement ?

Ainsi, le modal positionné de manière absolue s'aligne sur son premier parent positionné ( class="eight column" ). Tu peux essayer d'ajouter des css comme ça...

.reveal-modal { position:fixe;)

et voyez si cela fonctionne comme vous le souhaitez

D'accord. C'est à partir de la ligne 17 du grid.css de la Fondation.

d'accord. Je n'ai pas pu lire vos noms de fichiers. Je ne suis qu'un utilisateur - pas un développeur zurb. Vous pouvez essayer le correctif ou désimbriquer votre div modal et le mettre au bas du code html.

En fait, je suis passé à ColorBox pour les modaux et je voulais juste signaler le bogue (s'il s'agit d'un bogue et non d'une erreur de ma part). Merci pour l'aide à localiser le problème! J'ai passé des heures à l'utiliser mais je n'ai pas trouvé le problème.

Je vais être honnête, je ne peux pas suivre les coulisses de cette conversation :) Y a-t-il un bug dans Reveal ou était-ce un conflit avec d'autres styles ?

Le problème est que si vous placez un modal de révélation à l'intérieur d'une colonne, le modal de révélation s'aligne sur cette colonne au lieu de s'aligner sur la fenêtre du navigateur. Je ne sais pas si c'est quelque chose que vous pouvez corriger ou non.

Il semble que vous puissiez définir le mode de révélation sur position:fixed par défaut, mais je ne sais pas si vous avez une raison contre cela.

Oh, je t'en prie. Oui, les modaux Reveal sont conçus pour être placés à la fin de la page, pas dans la mise en page - nous utilisons absolu au lieu de fixe afin que vous puissiez continuer à faire défiler la page (si vous le souhaitez). Changer cela en position:fixed le corrigerait, cependant.

Le mieux est probablement de le mentionner dans la doc, alors.

Le 30 novembre 2011, à 19h14 , Jonathan

Oh, je t'en prie. Oui, les modaux Reveal sont conçus pour être placés à la fin de la page, pas dans la mise en page - nous utilisons absolu au lieu de fixe afin que vous puissiez continuer à faire défiler la page (si vous le souhaitez). Changer cela en position:fixe conviendrait cependant.

---

Répondez directement à cet e-mail ou consultez-le sur GitHub :
https://github.com/zurb/foundation/issues/129#issuecomment-2968907

@ smileyj68 une idée de la position: le parent fait sur .column, .columns dans grid.css? Position: fixe sur le modal de révélation n'est pas une option très pratique lorsque vous travaillez sur un site réactif car vous avez vraiment besoin de faire défiler dessus. Je vais essayer de l'écraser ici localement et tester si cela a cassé quelque chose. Mais si vous avez une idée, je serais ravi de l'entendre.

Ce problème m'a juste mordu à l'arrière aussi. J'aimerais que ce soit documenté...

Et moi, bravo pour ce commentaire. Il est dit dans la documentation de le mettre après tout, mais lorsque vous l'utilisez avec Wordpress, cela signifie dans le pied de page. Ce serait pratique s'il disait pourquoi faire cela.

Moi aussi. Après l'avoir mis en position : fixe ; et débordement : défilement ; les choses se sont bien passées.

Toute solution?! Définir la position fixe n'est pas une bonne idée si votre modal est grand. Si quelqu'un trouve une solution, écrivez ici. Merci!

j'ai toujours ce problème :(! Une solution? PLZ

Le réglage de la position sur fixe ne fonctionne pas

J'ai réussi à le faire fonctionner. le passage du positionnement absolu au positionnement fixe a fonctionné lorsque j'ai ouvert foundation.css et foundation.min.css et modifié le positionnement sur la classe .reveal-modal dans les deux fichiers comme suit :

-absolu à fixe
- top : 50px à 30% (vous pouvez changer cela, j'avais besoin de le changer pour le faire descendre assez loin pour voir)

C'est certainement un problème si vous utilisez Foundation pour plus que du HTML statique. My Foundation Theme Framework pour Shopify a également des problèmes avec les fenêtres contextuelles modales pour les images de produits. L'utilisation de .reveal-modal { position:fixed;overflow :scroll} aide certainement. Mais ce n'est pas une vraie solution. « Révéler » peut être très laid et peu pratique dans ce cas. Aucune quantité de CSS pur ne va résoudre ce problème, pour autant que je puisse le voir.

Le problème que vous rencontrez est que le modal Reveal est affecté par le parent de positionnement dans les versions précédentes, vous ne devriez donc vraiment avoir qu'un modal Reveal en tant qu'enfant direct de l'élément body.

Vous ne devriez pas voir ce problème avec la version 4.3.2 car cela garantit que le modal est déplacé pour être un enfant direct du body tandis que le modal est visible, ce qui atténue les problèmes de positionnement étranges que votre CSS causerait autrement .

Si vous voyez cela dans 4.3.2, veuillez ouvrir un ticket avec un exemple, car j'ai apporté des modifications spécifiques pour m'assurer que cela fonctionne correctement.

Je suis d'accord que ce " Les modaux de révélation sont conçus pour être placés à la fin de la page, pas dans la mise en page" devrait être placé dans la documentation car les débutants peuvent s'énerver avec cette omission. J'ai dû chercher sur tout le Web avant de voir le commentaire de @ smileyj68 Merci

@chimdi2000 Depuis 4.3.2, ce n'est plus un problème puisque le javascript le déplacera pour vous si vous ne l'avez pas au bon endroit, donc je pense que toute autre documentation est inutile.

Merci pour l'avertissement @seantimm. Je suppose que je ferais mieux de mettre à jour le framework du thème Shopify Foundation 4 !

@seantimm 4.3.2 a résolu mes problèmes de positionnement, mais en raison de la présence d'éléments de formulaire à l'intérieur de la révélation et de leur déplacement en dehors du formulaire, ils ne peuvent plus être soumis.

En tant que correctif personnalisé, j'ai ajouté un paramètre pour appendElement permettant de les ajouter à un emplacement spécifique dans le document. Une chance de l'ajouter dans une future version?

Je me rends compte que c'est un vieux fil, mais en décembre 2014, je rencontre toujours ce problème. Certes, c'est une solution assez simple, mais l'intérêt d'utiliser un cadre comme celui-ci est que nous n'avons pas à passer du temps sur les choses de base et pouvons concentrer notre temps ailleurs.

Y a-t-il des plans pour étoffer cela dans les prochaines versions ? La possibilité de choisir si le modal est une position fixe ou absolue semble être une fonctionnalité intéressante. On dirait que cela pourrait être fait avec des variables sass.

@ smileyj68 , pouvez-vous expliquer pourquoi il est souhaitable que la page continue de pouvoir défiler pendant qu'une révélation est ouverte ? Il me semble que lorsqu'un modal est ouvert, le contenu de la page est destiné à être bloqué. N'est-il pas préférable de le réparer et de définir une propriété de débordement pour que le modal défile ? S'il s'agissait de la valeur par défaut, il ne serait pas nécessaire de le placer à la fin de la page, ce qui est une difficulté pour de nombreuses situations de CMS.

De plus, j'ai dû changer la position de révélation-bg d'absolue à fixe dans tous mes projets. Je ne comprends pas pourquoi cela serait jamais défini comme absolu.

J'ai rencontré un problème similaire ce matin (à l'aide des fondations 5.4.5) et je l'ai résolu en ajoutant ce qui suit à .reveal-modal pour le corriger et le centrer sur la page :

.reveal-modal.open {
  position:fixed;
  top:50%!important; /* override inline style injected from JS */
  left:50%;
  transform:translate(-50%, -50%);
}