Formulario de registro dentro de una imagen diseñada [POP-UP]

[Phantasy]

Muy buenas, no se si el tema lo describe totalmente. De todas formas lo explico, necesito ayuda para crear un código, que su función es:

Al pinchar en un botón, se abra un pop-up con una imagen dentro y unos cuadros de formulario para registrarse, la pagina que había anteriormente quedara con un color opacido. Para salir del formulario pincharemos afuera de este y volverá al estado normal, rellenaremos al formulario y lo enviaremos o lo cerramos pinchando en la X.

Solamente necesito la parte de pinchar el botón, aparecer el pop-up con la imagen, por lo demás (formulario, etc) me ocupo yo.

Gracias y un saludo.

[EFEX]

Con javascript podes hacerlo... pero que llevas hasta ahora?

[alario0]

Mirate window.open en un evento onclick de javascript

[Phantasy]

Lo estoy haciendo con javascript y JQ.

Parte de JQ

Código [Seleccionar] Expandir

<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] Expandir

<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] Expandir

<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.

[Phantasy]

Totalmente terminado a falta de pulsar fuera del POP-UP y cerrarlo.

[EFEX]

Haber por partes, queres quitarle la opacidad? comentado las lineas...

Código (javascript) [Seleccionar] Expandir


$('#open').click(function(){
...
/* $('body').css('opacity', '0.5'); */
...
});
$('#close').click(function(){
...
/* $('body').css('opacity', '1'); */
...
});


Si queres cambiar el color de fondo del pop-up podes hacerlo con css.. te combiene tambien definir alto y ancho del popup.

Código (css) [Seleccionar] Expandir


#popup {
...
background-color: #999999;
width: 400px;
height: 300px;
margin-left: 50px; /* Utiliza margin-left,-right, -top, -bottom para posicionar el popup por la pantalla */
margin-top: 0px;
...
}
.close { /* Mostrar la X en la parte superior a la derecha */
position: absolute;
top: 0;
right: 0;
}


"...el cual cuando se pinche afuera de la imagen se vaya a la pagina en la que estaba o dándole a la X.."
Esta es una forma de hacerlo, pero lo bueno es que si haces click dentro del contenedor popup no desaparece.

Código (javascript) [Seleccionar] Expandir


$(document).ready(function(){
//Codigo
});
$(document).mouseup(function (event)
{
var container = $("#popup");

if (!container.is(event.target) // if the target of the click isn't the container...
&& container.has(event.target).length === 0) // ... nor a descendant of the container
{
$('#popup').fadeOut('slow');
}
});


"..Y se le doy a enviar me lleva a otra pagina dando la enhorabuena por el registro..."
Podes utilizar la funcion propia de javascript window.location.replace al hacer click sobre el boton del fomulario.

Código (javascript) [Seleccionar] Expandir


// Al hacer click sobre el boton del formulario...
window.location.replace("http://misitio.com"); // Redireccionarlo al aviso 'enhorabuena por el registro!'  ;)


Tambien si queres seguir con jquery podes cambiar todo el contenido del popup.

Código (javascript) [Seleccionar] Expandir


$(document).ready(function(){
...
$('.cambiarTexto').click(function(){
var nuevoContenido = 'Enhorabuena por el registro.!';
if ($('#popup').is(':visible')) {
$('#popup .content-popup').html(nuevoContenido);
};
});
...
});


Código (html4strict) [Seleccionar] Expandir


<div class="content-popup">
<button class="cambiarTexto">Subir Formulario</button>
<div>