Foundation-sites: Revelar o posicionamento modal?

Você tem um link para que possamos ajudar a descobrir o que está acontecendo?

Deixe-me colocá-lo em funcionamento, onde você pode ver, e depois enviarei uma mensagem com os detalhes de login.

Ok, envio os detalhes em uma mensagem privada.

Acho que você definiu uma regra em css .column, .columns {position: relative;}

O modal de revelação é posicionado em absoluto. Não sei porque não está posicionado fixo. Possivelmente para habilitar a rolagem?

Portanto, o modal absolutamente posicionado está se alinhando ao primeiro pai posicionado (classe = "oito colunas"). Você pode tentar adicionar css como este ...

.reveal-modal {position: fixed;)

e veja se funciona da maneira que você deseja

OK. Isso é da linha 17 do grid.css da Fundação.

OK. não consegui ler seus nomes de arquivo. Sou apenas um usuário - não um zurb dev. Você pode tentar a coisa fixa ou unnesting seu div modal e colocá-lo na parte inferior do html.

Na verdade, mudei para ColorBox para modais e só queria relatar o bug (se é um bug e não um erro meu). Obrigado pela ajuda em localizar o problema! Passei horas mexendo nisso, mas não consegui encontrar o problema.

Vou ser honesto, não posso acompanhar o lado dos bastidores desta conversa :) Existe um bug no Reveal ou foi um conflito com outros estilos?

O problema é que, se você colocar um modal de revelação dentro de uma coluna, o modal de revelação se alinha a essa coluna em vez de se alinhar à janela do navegador. Não sei se isso é algo que você pode consertar ou não.

Parece que você pode definir revelar-modal como position: fixed como padrão, mas não sei se você tem um motivo contra isso.

Oh, entendi. Sim, os modais Reveal são projetados para serem colocados no final da página, não dentro do layout - usamos absoluto em vez de fixo para que você possa manter a rolagem da página (se quiser). Mudar isso para position: fixed iria consertar, no entanto.

Provavelmente é melhor mencionar isso na documentação, então.

Em 30 de novembro de 2011, às 19h14 , Jonathan

Oh, entendi. Sim, os modais Reveal são projetados para serem colocados no final da página, não dentro do layout - usamos absoluto em vez de fixo para que você possa manter a rolagem da página (se quiser). Mudar isso para position: fixed iria caber, no entanto.

---

Responda a este e-mail diretamente ou visualize-o no GitHub:
https://github.com/zurb/foundation/issues/129#issuecomment -2968907

@ smileyj68 alguma ideia do que a posição: relativa está fazendo em .columns, .columns em grid.css? Posição: fixada no modal de revelação não é uma opção muito boa ao trabalhar em um site responsivo, pois você realmente precisa rolar nele. Vou tentar sobrescrever isso aqui localmente e vou testar se quebrou alguma coisa. Mas se você tiver alguma ideia, eu adoraria ouvir.

Esse problema também me mordeu na parte traseira. Gostaria que isso fosse documentado ...

E eu, bom trabalho por este comentário. Diz na documentação para colocá-lo depois de tudo, mas ao usá-lo com o Wordpress, isso significa no rodapé. Seria útil se dissesse por que fazer isso.

Eu também. Depois de colocá-lo na posição: fixo; e estouro: rolar; as coisas funcionaram bem.

Qualquer solução?! Definir posição fixa não é uma boa ideia se seu modal for grande. Se alguém encontrar alguma solução, por favor escreva aqui. Obrigado!

Ainda estou tendo este problema :(! Alguma solução? PLZ

Definir a posição como fixa não está funcionando

Eu consegui fazer funcionar. a mudança do posicionamento absoluto para o fixo funcionou quando abri Foundation.css e Foundation.min.css e alterei o posicionamento na classe .reveal-modal em ambos os arquivos da seguinte maneira:

-absoluto para fixo
- topo: 50px a 30% (você pode mudar isso, eu precisava mudar para fazer descer o suficiente para ver)

Isso é definitivamente um problema se você estiver usando o Foundation para mais do que apenas HTML estático. My Foundation Theme Framework para Shopify também tem problemas com pop-ups modais para imagens de produtos. Usar .reveal-modal { position: fixed; overflow : scroll} certamente ajuda. Mas não é uma solução real. 'Revelar' pode ser muito feio e impraticável neste caso. Nenhuma quantidade de CSS puro vai consertar isso, até onde posso ver.

O problema que você está enfrentando é que o modal Reveal é afetado pelo posicionamento pai em versões anteriores, portanto, você só deve realmente ter um modal Reveal como filho direto do elemento body.

Você não deve estar vendo este problema com a versão 4.3.2, pois ela garante que o modal seja movido para ser um filho direto de body enquanto o modal está visível, o que alivia quaisquer problemas de posicionamento estranhos que seu CSS esteja causando .

Se você estiver vendo isso em 4.3.2, abra um tíquete com um exemplo, pois fiz alterações específicas para garantir que está funcionando corretamente.

Concordo que este "Modais de revelação são projetados para serem colocados no final da página, não dentro do layout" deve ser colocado na documentação porque os novatos podem ficar irritados com essa omissão. Tive que pesquisar em toda a web antes de ver o comentário de @ smileyj68. Obrigado

@ chimdi2000 A partir de 4.3.2, isso não é mais um problema, pois o javascript irá movê-lo para você se você não o tiver no lugar certo, então eu acho que qualquer documentação adicional é desnecessária.

Obrigado pelo aviso @seantimm. Acho melhor atualizar a estrutura de temas do Shopify Foundation 4!

@seantimm 4.3.2 corrigiu meus problemas de posicionamento, mas devido a ter elementos de formulário dentro da revelação e sendo movidos para fora do formulário, eles não podem mais ser enviados.

Como uma correção personalizada, adicionei uma configuração para appendElement, permitindo que eles sejam adicionados a um local específico no documento. Alguma chance de adicionar isso em uma versão futura?

Sei que esse é um tópico antigo, mas desde dezembro de 2014, ainda estou tendo esse problema. Concedido, é uma solução simples, mas o objetivo de usar uma estrutura como essa é para que não tenhamos que gastar tempo com coisas básicas e possamos concentrar nosso tempo em outro lugar.

Há algum plano para aprofundar isso em lançamentos futuros? A capacidade de escolher se o modal é uma posição fixa ou absoluta parece um ótimo recurso. Parece que isso poderia ser feito com algumas variáveis ​​atrevidas.

@ smileyj68 , você pode explicar por que é desejável que a página continue a rolar enquanto uma revelação está aberta? Parece-me que quando um modal é aberto, o conteúdo da página deve ser bloqueado. Não é preferível fixá-lo e definir uma propriedade de estouro para que o modal role? Se esse fosse o padrão, não seria necessário colocá-lo no final da página, o que é uma dificuldade para muitas situações de CMS.

Além disso, tive que alterar a posição de revelação-bg de absoluta para fixa em todos os meus projetos. Não estou entendendo por que isso seria definido como absoluto.

Encontrei um problema semelhante esta manhã (usando Foundation-rails 5.4.5) e o resolvi adicionando o seguinte a .reveal-modal para corrigi-lo e centralizá-lo na página:

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