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