Foro de elhacker.net

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.

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

Mirate window.open en un evento onclick de javascript

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.

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

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

$('#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.

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

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

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

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

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