[SOLUCIONADO] Como mostrar datos en un popup

jandrogdz · #1 (**permalink**) 11/03/2013, 16:04

Buenas foro

Tengo una pregunta como puedo mostrar el detalle de un producto en un popup hecho con css alguien sabe como hacerlo les agradeceria muchisimo.

De antemano muchas gracias

quimfv · #2 (**permalink**) 12/03/2013, 02:18

Cita:

...un popup hecho con css...

Si es un div, puedes mostrar datos igual que fuera un div de la estructura del documento...

Explica como has hecho el popup y te podremos orientar. Depende de como este hecho quizas la solución es mas de javascript que de php.

jandrogdz · #3 (**permalink**) 12/03/2013, 08:43

El popup lo hago de la siguiente manera:

Código CSS:

Ver original<style>
 
#divBackground{
visibility:hidden;
position:fixed;
left:0;
top:0;
width:100%;
height:100%;
display:none;
background-color:#000;
filter:alpha(opacity=60);
-moz-opacity:.6;
opacity:.6;
z-index:9;
}
 
#divPopup{
position:fixed;
top:50%;
left:50%;
margin-top:-81px;/* half of the height plus a little to the top */
margin-left:-150px;/* half of the width */
visibility:hidden;
display:none;
border:1px solid #000;
background-color:#FFF;
color:#333;
padding:0;
height:300px;
width:350px;
z-index:10;
font-size:12px;
}
 
#divPopupHead{
position:absolute;
top:0;
left:0;
width:100%;
background-color:#2B60DE;
color:#fff;
font-weight:bold;
padding:2px0;
z-index:-1;
}
 
#divClosePopup{
float:right;
text-align:right;
cursor:pointer;
padding-right:10px;
}
 
#divClosePopupa{
text-decoration:none;
color:#333;
}
 
#divClosePopupa:hover{
color:#FF0000;
}
 
#divPopupContent{
clear:both;
padding:10px;
}
</style>

el javascript:

Código Javascript:

Ver original<script language="javascript"type="text/javascript">
 
function showPopup(){
//Showpopup
document.getElementById('divBackground').style.visibility='visible';
document.getElementById('divPopup').style.visibility='visible';
document.getElementById('divBackground').style.display='block';
document.getElementById('divPopup').style.display='block';
}
 
function hidePopup() {
//Hidepopup
document.getElementById('divBackground').style.visibility='hidden';
document.getElementById('divPopup').style.visibility='hidden';
document.getElementById('divBackground').style.display='none';
document.getElementById('divPopup').style.display='none';
}
 
</script>

Código HTML:

Ver original<body>
<div id='divBackground'></div>
  <div id='divPopup'>
    <div id='divPopupHead'>titulo</div>
    <div id='divClosePopup'onclick='hidePopup()'><a href='#'>X</a></div>
    <div id='divPopupContent'>
        contenido
    </div>
  </div>
<a href='javascript:showPopup();'>Ver detalle</a>
</body>

jandrogdz · #4 (**permalink**) 12/03/2013, 09:07

Al parecer he logrado mandar una variable a en método GET pero el popup solo aparece y desaparece en menos de un segundo alguien me puede apoyar a dejarlo visible.

Código PHP:

Ver original<body>
<a href="?var=dato" onclick='javascript:showPopup();'>Ver detalle</a>
<div id='divBackground'></div>
  <div id='divPopup'>
    <div id='divPopupHead'>titulo</div>
    <div id='divClosePopup'onclick='hidePopup()'><a href='#'>X</a></div>
    <div id='divPopupContent'>
        contenido<br />
        <?php
        echo "Se recibe la variable por get: ".@$_GET['var']." <br />";
        ?>
    </div>
  </div>
</body>

informacionsys · #5 (**permalink**) 12/03/2013, 09:25

podrias validar que si la variable var contiene algo ejecute la funcion showPopup();

Código PHP:

Ver originalif(!empty($_GET['var']))
{ 
  echo '<script>showPopup()</script>';
   echo "Se recibe la variable por get: ".@$_GET['var']." <br />";
}

jandrogdz · #6 (**permalink**) 12/03/2013, 11:24

Excelente informacionsys es justo lo que necesitaba te lo agradezco bastante.