Jump to content
guarana1

Abrir janela - popup no centro do ecra

Recommended Posts

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.

Share this post


Link to post
Share on other sites
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;'...

Share this post


Link to post
Share on other sites
I-NOZex

para centrar como deve de ser deves definir:

position: relative;
margin: 0 auto;

e tirar esses lefts e tops ;)


B2R » Beat2Revolution v3.0b | Regista e divulga-nos

beat2revolution.net

Share this post


Link to post
Share on other sites
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...

Edited by guarana1

Share this post


Link to post
Share on other sites
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.

Share this post


Link to post
Share on other sites
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>

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

×
×
  • Create New...

Important Information

By using this site you accept our Terms of Use and Privacy Policy. We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.