Ir para o conteúdo
  • Revista PROGRAMAR: Já está disponível a edição #58 da revista programar. Faz já o download aqui!

guarana1

Abrir janela - popup no centro do ecra

Mensagens Recomendadas

guarana1    7
guarana1

Boas, o meu problema é o seguinte... tenho uma janela popup que é aberta, mas não fica no centro do ecrã, como devia ficar...

andei a testar este código, e está a funcionar

<style>
   .greenBorder {border: 1px solid green;} /* just borders to see it */
 </style>
 <CENTER>
  <div class="greenBorder" style="display: table; height: 100%;width: 100%; #position: relative; overflow: hidden;">
   <div style=" #position: absolute; #top: 50%;display: table-cell; vertical-align: middle;">
  <div class="greenBorder" style=" #position: relative; #top: -50%">
  TESTE
   </div>
   </div>
 </div>
 </center>

mas quando meto esse código ná minha janela popup, já não esta a dar

<div id="my_popup"  style="display:none;border:0px dotted gray;padding:.3em;background: rgba(255, 255, 255, 1);;position:absolute;width:600px;height:600x\px;left:450px;top:100px;z-index:+1;">

<div id="wrapper">
<CENTER>
  <div class="greenBorder" style="display: table; height: 100%;width: 100%; #position: relative; overflow: hidden;">
   <div style=" #position: absolute; #top: 50%;display: table-cell; vertical-align: middle;">
  <div class="greenBorder" style=" #position: relative; #top: -50%">

conteudo aqui
</div>
<div class="gradient"></div>
 </div>
   </div>
 </div>
 </center>

Tenho uma ideia do que esta mal.. deve ser na div do "my_popup" na parte do "width:600px;height:600x\px;left:450px;top:100px"

Se tirar esse left e top, então a janela já nao abre.

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites
VieiraPT    0
VieiraPT

<div id="my_popup" style="border:0px dotted gray; padding:.3em;background: rgba(255, 255, 255, 1);position:absolute;width:600px; height:600px; left:450px; top:100px;">

Experimenta assim... tinhas ai ';' a mais... e também não percebi o 'z-index:+1'.. e tirei o 'display:none;'...

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites
guarana1    7
guarana1

<div id="my_popup" style="border:0px dotted gray; padding:.3em;background: rgba(255, 255, 255, 1);position:absolute;width:600px; height:600px; left:450px; top:100px;">

Experimenta assim... tinhas ai ';' a mais... e também não percebi o 'z-index:+1'.. e tirei o 'display:none;'...

O z index e o ";" a mais que tinha ai não interferem de modo nenhum, "sem o 'display:none' o popup nem aparece

para centrar como deve de ser deves definir:

position: relative;
margin: 0 auto;

e tirar esses lefts e tops ;)

Continua tudo igual...

Editado por guarana1

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites
guarana1    7
guarana1

<div id="my_popup" style="display:none;border:1px dotted gray;padding:.3em;background-color:white; margin: auto;position:absolute;width:600px;height:200px; top: 0; left: 0; bottom: 0; right: 0;">

Após várias horas a tentar... vi este código e resultou.

.Absolute-Center {
margin: auto;
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
}

Resolvido.

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites
D'Leandro™    0
D'Leandro™

O seu código tem alguns vários erros de tipografia.

Código correto:

<div id="my_popup"  style="display:none;border:0px dotted gray;padding:.3em;background: rgba(255, 255, 255, 1);position:absolute;width:600px;height:600xpx;left:450px;top:100px;z-index:1;">
   <div id="wrapper">
       <center>
   <div class="greenBorder" style="display: table; height: 100%;width: 100%; #position: relative; overflow: hidden;">
   <div style=" #position: absolute; #top: 50%;display: table-cell; vertical-align: middle;">
	  <div class="greenBorder" style=" #position: relative; #top: -50%">
Conteudo Aqui
       </div>
   <div class="gradient"></div>
   </div>
   </div>
       </center>
   </div>
   </div>

 <style>
   .greenBorder {border: 1px solid green;} /* just borders to see it */
 </style>
 <center>
   <div class="greenBorder" style="display: table; height: 100%;width: 100%; #position: relative; overflow: hidden;">
   <div style=" #position: absolute; #top: 50%;display: table-cell; vertical-align: middle;">
   <div class="greenBorder" style=" #position: relative; #top: -50%">
  TESTE
   </div>
   </div>
   </div>
 </center>

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

Crie uma conta ou ligue-se para comentar

Só membros podem comentar

Criar nova conta

Registe para ter uma conta na nossa comunidade. É fácil!

Registar nova conta

Entra

Já tem conta? Inicie sessão aqui.

Entrar Agora


×

Aviso Sobre Cookies

Ao usar este site você aceita os nossos Termos de Uso e Política de Privacidade. Este site usa cookies para disponibilizar funcionalidades personalizadas. Para mais informações visite esta página.