Lo estoy haciendo con javascript y JQ.
Parte de JQ
Parte CSS
Parte HTML
El tema es que lo hace bien, pero el body me lo pone en opacidad 0.5 y encima me deja interactuar con la pagina de atrás, y yo lo quiero con un gris opaco, el cual cuando se pinche afuera de la imagen se vaya a la pagina en la que estaba o dándole a la X. Y se le doy a enviar me lleva a otra pagina dando la enhorabuena por el registro.
Parte de JQ
Código [Seleccionar]
<script type="text/javascript">
$(document).ready(function(){
$('#open').click(function(){
$('#popup').fadeIn('slow');
$('body').css('opacity', '0.5');
return false;
});
$('#close').click(function(){
$('#popup').fadeOut('slow');
$('body').css('opacity', '1');
return false;
});
});
</script>
Parte CSS
Código [Seleccionar]
<style>
#content {
width: 900px;
margin: 0px auto;
padding: 2em 1em;
}
#column-right {
background-color: #EBE9EA;
border: 1px solid #D2D2D2;
border-radius: 8px 8px 8px 8px;
float: right;
min-height: 225px;
margin-bottom: 10px;
overflow: hidden;
text-align: center;
width: 180px;
padding-top:10px;
}
#popup {
left: 0;
position: absolute;
top: 0;
width: 100%;
z-index: 1001;
}
.content-popup {
margin:0px auto;
margin-top:50px;
padding:10px;
width:735px;
min-height:290px;
/*border-radius:4px;*/
background:url(pop-up.png);
background-repeat:no-repeat;
/*box-shadow: 0 2px 5px #666666;*/
}
.close {
position:relative;
left:610px;
}
</style>
Parte HTML
Código [Seleccionar]
<div id="popup" style="display: none;">
<div class="content-popup">
<div class="close"><a href="#" id="close">X</a></div>
<div>
<div style="float:left; width:100%;">
</div>
</div>
</div>
</div>
El tema es que lo hace bien, pero el body me lo pone en opacidad 0.5 y encima me deja interactuar con la pagina de atrás, y yo lo quiero con un gris opaco, el cual cuando se pinche afuera de la imagen se vaya a la pagina en la que estaba o dándole a la X. Y se le doy a enviar me lleva a otra pagina dando la enhorabuena por el registro.